In Flexbox layout, how does the browser handle the width of flex items?
I am learning Flexboxes based CSS3 layout.
I usually use some of the power of flexboxes just to layout some navigation.
My quiestion is when the property flex
is applied to children, how the browser handles the width of the elements.
Here are some notes:
Now this is the confusing part ...
When I use flex-basis:300px
for #child2
instead of using width:300px
, the same thing happens ...
So, is it so?
source to share
Property flex-wrap
5.2 Wrap around flex lines: the flex-wrap property
The property
flex-wrap
determines whether the flex container is single-line or multi-line , and the cross-axis direction, which determines the direction of the new lines.
Value: nowrap | wrap | wrap-reverse
Initial: nowrap
As you can see, the initial value of the property flex-wrap
is equal nowrap
, which means :
Nowrap
Flex container single-line . The lateral start direction is equivalent to either the start or the start start of the current recording mode, whichever is on the cross axis, and the cross direction is the opposite direction of the cross start.
With this, flex items will fit one line at a time by default, no matter how many width
; "even if it would overflow the content."
Therefore the value used should be wrap
to create a multi-line container that "breaks its flex items across multiple lines"
How the browser handles the width of flex items
Flex items have the following defaults:
-
flex-grow
0
-
flex-shrink
1
-
flex-basis
auto
It means:
- They won't grow inside a flex container;
- They will shrink evenly
- They will be determined based on their content.
This way, if you give width
1 - with a value larger than the available space inside the flex container - to the flex item, they will shrink evenly.
If you give flex-shrink
of to 2
a larger one eg. #child2
, it will shrink twice as much as another, for example #child1
.
Property effect flex
flex
is an abbreviation properties flex-grow
, flex-shrink
, flex-basis
; It accepts 3 values, for which the second and third values are optional.
Syntax
none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
The default flex
is 0 1 auto
. However, if you use the one-value syntax - ie flex: 1;
- the computed value will be flex: 1 1 0%
.
To understand the difference between flex-basis
auto
and 0
, take a look at the picture below, which is taken from the Flexible Box Spec :
Figure 6. Diagram showing the difference between "absolute" bend (starting at zero) and "relative" bending (starting at the base of the size of the contents of the elements). The three elements have flex factors of 1, 1, and 2, respectively.
By providing flex: 1
2 for #child2
, because of flex-basis: 0
it, it will no longer respect the width of the flex item's content. Hence the calculated width #child2
will be equal to the available space inside the flex container.
Moreover, by giving flex: 1
2 element #child
(s #child2
), the flex items are forced to grow evenly, whether they are explicit width
or not; No matter how much their value is width
3 .
Last but not least!
To have a multi-line flex container, besides being flex-wrap: wrap
in the container, if you gave flex-grow: 1
(i.e. flex: 1;
) an item flex, you must specify that flex-basis: 100%
(namely:) flex: 1 100%
.
1. Equally flex-basis
without indication flex-grow
.
2. Equal to flex-grow: 1;
, flex-shrink: 1;
and flex-basis: 0
, and by default flex-shrink: 1;
.
3. Will flex-basis
affect the calculated width for now.
source to share