BodinglesTM - -   Bright Lightbulb Graphic Ideas   - -

Full Stack MERN Web Development

Child Element Flex Properties

Back to Flex Reference Index



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
1
2
3
4
5


    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.

1
2
3
4
5


    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.

1
2
3
4
5

if we give box item 1 a value of flex-grow: 2; it will now take up twice the space as box item 2

1
2
3
4
5

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.

1
2
3
4
5

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.

1
2
3
4
5

Back to Top