In Flexbox layout, how does browser handle width of flex items?

Question

I am studying CSS3 layout based on Flexboxes.

I usually use the portion of the power of flexboxes just to layout some navigation.

My quiestion is when property flex is being applied to child elements, how the browser handle the width of elements.

Here's some note:

Now it's confusing part...

When I use flex-basis:300px for #child2 instead of using width:300px, same thing happens...

So is this the way it is?

Answer 1

The flex-wrap property

5.2 Flex Line Wrapping: the flex-wrap property

The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

Value:      nowrap | wrap | wrap-reverse
Initial:    nowrap

As can be seen, the initial value of flex-wrap property is nowrap which means:

nowrap

The flex container is single-line. The cross-start direction is equivalent to either the inline-start or block-start direction of the current writing mode, whichever is in the cross axis, and the cross-end direction is the opposite direction of cross-start.

That being said, flex items would be placed in a single line by default, no matter how much their width is; "even if that would cause contents to overflow."

Therefore the used value should be wrap to create a multi-line flex container which "breaks its flex items across multiple lines"

---

How the browser handle the width of flex items

Flex items have the following by default:

• flex-grow of 0
• flex-shrink of 1
• flex-basis of auto

Which means:

• They won't grow within the flex container;
• They will shrink evenly
• They will be sized based on their contents.

EXAMPLE HERE

Thus, if you give width¹ - with a value higher than the available space inside the flex container - to a flex item, they'll shrink evenly.

EXAMPLE HERE

If you give flex-shrink of 2 to the bigger one, e.g. #child2, it will shrink two times more than the other one, e.g #child1.

EXAMPLE HERE

---

The effect of flex property

flex is a shorthand of flex-grow, flex-shrink, flex-basis properties; It accepts 3 values which the second and third values as optional.

Syntax

none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

The default value of flex is 0 1 auto. However if you use the one-value syntax - i.e. flex: 1; - the computed value would be flex: 1 1 0%.

In order to understand the difference between flex-basis of auto and 0 take a look at the picture below which is taken from Flexible Box Spec:

Figure 6. A diagram showing the difference between "absolute" flex (starting from a basis of zero) and "relative" flex (starting from a basis of the item’s content size). The three items have flex factors of 1, 1, and 2, respectively.

By giving flex: 1² to the #child2, due to flex-basis: 0 it won't respect the width of the flex item's contents anymore. Hence the computed width of the #child2 would be equal to the available space within the flex container.

EXAMPLE HERE

In addition, by giving flex: 1² to the #child item (as well as the #child2), the flex items are forced to grow evenly, no matter if they have an explicit width or not; No matter how much their width value is³.

EXAMPLE HERE

---

Last but not least!

In order to have a multi-line flex container, In addition to having flex-wrap: wrap on the container, if you have given flex-grow: 1 (i.e. flex: 1;) to a flex item, you have to give that flex-basis: 100% as well (in short: flex: 1 100%).

EXAMPLE HERE

---

<sup>1. Equal to flex-basis without specifying flex-grow.
2. Equal to flex-grow: 1;, flex-shrink: 1; and flex-basis: 0 while flex-shrink: 1; is applied by default.
3. While flex-basis would affect the computed width.</sup>