Full Stack MERN Web Development
Child Element Flex Properties
In a "flex" container, the Child Elements are referred to as Flex Items.
The flex item
properties
control item behavior within the parent container.
- Key properties of flex items:
- flex-basis: the initial size before "flexing".
- flex-grow: determines the growth relative to the other items.
- flex-shrink: determines the shrinking relative to the other items.
- align-self: individual alignment that overrides the align-items defined in the parent
container.
- remember that align=items affects the cross-axis
- so if you are using a flex-row container, the align items
would be moving items on the CROSS axis (vertically)
- order: controls the item display order within the container.
Default Setup
- Setting the default workspace
- In the parent container, set display: flex;
- this defines the container as a "flex" container
- in the "item" class that defines the boxes, set flex-basis: 50px;
- this sets the base width of the "box" items to 50px
- flex-basis replaces width: 50px; that would normally be used in a non-flex container
- Let's spread the boxes out across the row - we'll give box item 1 a property of:
- flex-grow: 1;
so, box item 1 takes up ALL of the extra space.
- Let's split the extra space between boxes 1 AND 2
- flex-grow: 1;
- for both item boxes
so now, box item 1, AND box item 2 takes up ALL of the extra space, but split the extra space evenly, because they BOTH have the same flex-grow value of 1.
if we give box item 1 a value of flex-grow: 2; it will now take up twice the space as box item 2
and if we leave item box 1 as default flex-grow, but give the remaining boxes values of 1, 2, 3,
4, we get the following:
with each subsequent item box getting twice the space as the previous box.
and if we give ALL of the item boxes a flex-grow value of 1,
they will distribute ALL of the available extra space, evenly.