When should we use float vs. margin:auto to center elements? Do we use both? Can you please give more examples about how to make different elements in the center?
can we talk about centering elements? I'm still a little confused about what all the answer options do.

Great question. A lot of people want to use float to center elements. There's a float:left and a float:right, so there must be a float:center; isn't there?

No. There is no float:center.

To center things, we use either

margin:auto which is appropriate for block elements where we want to center the block, not necessarily the things within it. This almost always means adjusting the width of the block element.
text-align:center, which is appropriate for inline elements, including lines of text, though I personally think this is often ugly. But it's simple and effective if there's only one inline element you want to center.

How does float wrap text around an image?

We have to understand the flow, which is the term for how words and such flow like liquids into their containers.

the float attribute temporarily removes the element (image) from the flow, allowing the words to move up, and then shoves it back in, forcing the words to flow around the image.

I want to know a little more about relative and absolute positions.

when to use position:relative vs position:absolute

These work together to create a coordinate system where you can position things like in high school math class.

We put position:relative on the ancestor and position:absolute on the descendants.

The descendants will also have top:y and left:x.

The idea of ancestor in the question of ""to place an item using a coordinate system A. put position:absolute on the ancestor and position:relative on the positioned element""

An ancestor is some element that surrounds the elemement we are talking about. Suppose we had:


    <main>
        <h1>Centering</h1>
        <section>
            <h2>block elements</h2>
            <p>...</p>
        </section>
        <section>
            <h2>inline elements</h2>
            <p>...</p>
        </section>
    </main>

The main element is an ancestor of all the things it contains: the h1 and both section elements, including all the things inside them.

Similarly, each section is an ancestor of the things inside them, like the h2 and the paragraphs.

Could you elaborate more on the concept of a non-static ancestor?

There are lots of possible ancestors. Most will have the default position property, which is position:static.

The first one (going upwards) that isn't is the one that we are referring to.

how do we set relative position on the ancestor?

We use CSS, like this:


div#board { position: relative; }

Could you explain with examples and html what shrink&grow of flex items work?

Sure; we saw some examples today. Basically, if the web page gets larger, what happens to the extra space? Distributed equally? Or differently?

In the flex basis is the auto default the only option we have?

Good question. No, you can also specify, say, a percentage. If I have four flex children, and I want them all to be equal size, I might use flex: 1 1 25%, saying that the starting size for each is 25% of the width. Each is allowed to grow (equally) or shrink (equally), so they'll always be the same width.

can you review the syntax for flex, the "grow shrink basis" you talked about in the Flexbox section. i'm confused about how the grow and shrink works and how that is determined

Did the example above help?

Could we have more practice with flexboxes?

Yes, we will. Plus, you'll use them in the next assignment.

Can you help clarify the sixth question in the quiz? / On the last question about inline block elements I thought both B and C kind of made sense. Can you tell us more about the inline block elements and the properties they do or do not inherit from both inline elements and block elements.

Can we talk more about inline blocks, like visually.

Let's draw some pictures of inline-block elements, say for a photo gallery.

W3Schools has some good examples of inline-blocks

Confused about the syntax here for heigh allocation:

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

That says that the html and body (the outermost tags) take up 100% of the window. So, no scroll bars.

We can use a comma between two selectors to select both. So, instead of:


    html { height: 100%; }
    body { height: 100%; }

I can say:


    html, body { height: 100%; }

Those mean the same thing.