Quiz

This link doesn't work for me http://cs.wellesley.edu/~cs204/readings/flex/float-centering-and-more.html

Oh, I'm so sorry. Somehow, my site got corrupted and there are some missing/broken links. I'm trying to fix them, but I missed that one. My apologies.
If I miss another one (likely), please email me when you discover it. It's always possible that I will be able to fix it in time to help another student.
Can you further explain how to center a block element? Is this the same as centering a div element?
A DIV is a block element (it's the canonical block element), so yes, they are the same.
The standard trick is to (1) make sure its width is smaller than its container, so that there's some leftover space to allow for centering, and (2) use margin:auto on the left/right margins.
```
<div id="box5">Box 5 is to be kept empty!</div>
```
and
```
 #box5 {
     width: 20em;
     margin: 0px auto;
     background-color: tan;
 }
```
Which looks like:
Box 5 is to be kept empty!
Centering or aligning different elements

The restored reading from above should help. Let's talk through it quickly. float, centering, and more
What is the difference between using justify-content, align-items, and margin: auto to center elements? Are they responsible for centering different items?

Different ways. margin: auto is old and reliable, and for small things, can be easier than flexbox. However, it can't do vertical centering.
Flexbox is newer and works well with lists of things, using justify-content on the main axis and align-items on the cross axis. See: MDN aligning items
But a "list" of one item can be centered using those two properties.
Please explain min-width, max-width and width.
You talked about "You would think that only the width: 120px would be necessary, and in many cases it is, but sometimes that doesn't work, and the additional properties help." What are the cases when we need all min-width, max-width, and width set to the same value?

Yeah, that explanation was too vague. I've added some additional information
Please explain position (relative/absolute/static) and when to use each.
Sure. position: static is the default. You'll almost never use it unless it has been over-ridden and you are restoring it to the default.
The pair of relative and absolute are used when
- You want to allow content to overlap existing content. And
- You want fine-grained control of where it's placed, rather that leaving that to the browser and it's normal flow rules.
We put position:relative on the ancestror and we position descendants using position:absolute and properties like left/top
I'm still a little confused about how to specify top and left distances for descendants?
The syntax is straightforward, but the meaning takes some getting used to. We might use the following for a drop-down menu:
```
    selector {
        position: absolute;
        top: 0px;
        left: 10px;
    }
```
Can you explain the positions of the 3 colored boxes on the grid, like where did they start?

Sure; we'll play with that later today, but let me review now. positioning
No questions!

Great!