CSS Flex Items
The CSS flex items are the direct descendants of the assigned flex container. The div elements containing the cat images below are the direct descendants of the bordered div element that acts as the flex container.
Example 1:
Flex items have the following properties:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
The Order Property
This property specifies the order of the flex items inside the container. So even if an item is coded first, it can still appear last because of this CSS property.
Example 2:
By default, the value of the order property for all of the flex items is zero. For this example, we will randomize the order value of our div elements numbered from 1 to 10 by pressing the randomize order button below.
1
2
3
4
5
6
7
8
9
10
This works kinda like a slot machine would but in this case this is purely random while slot machines are not 100% on the random side.
The Flex-Grow Property
This property specifies how much a flex item grows relative to the other flex items. The default value for this is 0. To make this work properly, set all the other flex items flex-grow value to 1 and the particular flex item to the value you desire.
Example 3:
Make the third flex item grow "n" times its size relative to its peer flex items by pressing the grow button. The value of "n" is a randomized number between 1 and 50.
The Flex-Shrink Property
This property does the opposite of the property above. It shrinks the flex item relative to other flex items. The default value is one.
Example 4:
Make the second Ant-Man shrink by changing its flex-shrink value to "n" which is a number in between 1 and 100.
The Flex-Basis Property
This property sets or assigns the initial length of a flex item directly. This can be in pixels or even a percentage number relative to its flex container.
Example 5:
Make the middle Aran image cover a pixel number between 200px and 400px by clicking the button below:
The Flex Property
This property is a shorthand notation for flex-grow, flex-shrink, and flex-basis properties. Using this property for flex items is recommended.
The Align-Self Property
This last property specifies the individual alignment of a flex item. This overrides the align-items property set in its respective flex container.
Example 6:
The third flex item below has align-self value set to flex-start even though the value is set for center in the align-items value in the flex container.
1
2
3
4
