Quiz

main vs body tags?

The BODY is the entire page. The MAIN element is the main part of the content, probably excluding things like nav bars, headers (including banner ads) and maybe sidebars and such.
When would we want to use .thumbnail and ul.thumbnail or div.thumbnail?

.thumbnail applies to *every* element that has class="thumbnail". The others are more specific. ul.thumbnail applies to UL elements with class="thumbnail" and similarly for div.thumbnail.
Sometimes, it's nice to remind the read what the tag will be, unless you really are applying the class to different kinds of elements.
Can you go over how to center the different elements?
Sure. There are really only two possibilities:
- block elements (center by using margins) and
- inline elementS (center by putting text-align:center on the parent)
What does "leftover space" mean exactly?

By default, a block element has a width of 100%. That means its as big as it can be. It fits snugly in its container. So, it's meaningless to talk about centering it. (How do you center a 1-meter long poster in a 1-meter-long mailing tube?)
But if we make the width *smaller* than 100%, say 60%, then there's 40% of the width that is "extra". If the poster is 600cm long, we can put the extra 40cm on one end, the other end, or divide it equally and center the poster in the mailing tube.
Can we go over question 4? I don't think I understand which one to use. I would think align but text-align is different from align-items, right?
```
        to center a block element
        
A. use float:center     
B. use margin:auto  
C. use position:center  
D. use text-align:center    
Answer Key: B
    
```
Correct answer is B. Right, text-align is for "normal" rather that flexbox applications.
what does float: center do? (one of the choices from last question)

It doesn't exist! But it's very popular among beginners who want to center things.
Flexbox is very confusing, can you go over it in class?

For sure!
the 'flex' attribute that controls how items grow / shrink

Sure. I'll do some demos using something simpler than Ottergram.
Are the numbers used for the grow and shrink properties of a flex item always either 0 or 1?

Not always, but often. If you want to allocate "extra" space *equally* to two elements, then make them both grow:1, but if you want the extra space to be unequal, you could have grow:2 for one of them and grow:1 for the other. Then the space is allocated in a 2:1 ratio.
When using order, how does the program know where the element needs to move to? (with the example of order:2, how does the program know to put it in front of div.detail-image-container?)

The browser treats the element as if it came second, so the algorithm of the layout is the same.
Can we go over the order property and why it matters?

Sure. In Ottergram, we have a list of thumbnails and a detail picture. In a vertical layout, we might want the detail first (on the top) and the thumbnails second, while in a horizontal layout, we might want the thumbnails first (on the left) and the detail second.
Setting the order via CSS allows us this flexibility. We'll see this next time.
What happens when flex 0 0 auto?

The element can't grow or shrink.
What are the limits of flexbox? Are there other techniques we should know for webpage or mobile layout?

Flexbox is pretty powerful, but I don't know a list of its limits. It doesn't easily do grid layouts: e.g. 4x4.
There are lots of techniques. We won't learn them all, but we'll learn flexbox and we might learn about grid.
The process of placing a coordinate in flexbox positioning step by step.

Coordinates are separate from flexbox. Coordinates are for position:absolute.
position:static versus position: absolute and position:relative

static is the default; the normal "flow".
position:absolute positions the element in a coordinate system determined by a non-static ancestor
position:relative is either (1) a way to move something relative to its static position or (2) a way to make it non-static for the purposes of position:absolute of some other elements (descendants).
The positioning on a grid section. I was confused about where the starting point was so I did not understand the changes in position that the children made.

With position absolute, there's no starting point. You just place it, like in 8th grade math (my daughter's doing this).
I'm still don't fully understand the coordinate system and relative/absolute positions. Can you do a live example in class? Thank you...

I'd be glad to! Let's use the example in the reading
For the grid example, why is the CSS for the blue box not {position:absolute; bottom:-50px; right:-100px}? Why positive values?

Yeah, I don't really know *why* it's that way. It just is. But I'll tell you that most of the time, I use top/left and that follows the rules nicely.
Personally, I would use the Dev Tools to get it right, and then type those values into my CSS.
How does the placing with respect to browser window work? What other properties do we need?

Well, the browser has top, right, bottom and left edges, and we can measure the element's edges from those.
This is nice if you want to have something (such as a navigation element) that *doesn't* scroll.