Flex model allows automatically lay out items inside a container by management of positions, sizes and alignment. How it is work:
- define a flexible container using the display property
- select direction of layout. Axis along direction is called main axis. And other is called cross axis. The direction also determines the main size. For a horizontal main axis, this is the width. For a vertical main axis, this is the height.
- define how content must be justify along main axis if necessary
- define how content must be aligned along cross axis if necessary
- finally, you can assign rules separately for each item in the container
|display||For using flex model set one of the following values:
|flex-direction||Selects direction of layout. Possible values:|
|flex-wrap||Sets whether flex items are forced onto one line or can wrap onto multiple lines. Possible values:|
|flex-flow||Shorthands for flex-direction and flex-wrap properties.
|order||Sets order of item. Several elements can have the same order defining a group of elements. Items in a container are sorted by ascending order value and then by their source code order. Must be applied to item in container.|
aligning along main axis
Following css properties are used for justify content of flexible container along main axis.
|justify-content||Defines how to justify content in a flexible container along main axis. Must be applied to container.
Possible values are: |
|justify-self||Allows override a justify value for individual item. Must be applied to item in container.|
|justify-items||Defines default value of justify-self for items in container. Must be applied to container.|
|flex-grow||Sets factor for using free space for main size of item. Must be applied to item in container. Default value is 0. Negative values are invalid. |
For example first item of row has factor 1, and second has 2. As the row width increases, the free space will be divided into three parts. One part will be given to increase the width of the first element. And two parts to increase the width of the second element.
|flex-shrink||Sets a shrink factor. When the size of all items is larger than container, items shrink to fit. Items don't shrink below their minimum content size.|
|flex-basis||Sets initial size of main size.|
|flex||Shorthands for flex-grow, flex-shrink and flex-basis. Last two values are optional.|
aligning along cross axis
Here same logic as for main axis, but instead justify-* properties use align-* properties. Obviously, properties has effect when container have more than one line of items.
|align-content||Defines how to align content along cross axis. Must be applied to container.
Possible values are: |
|align-self||Allows override an align value for individual item. Must be applied to item in container.|
|align-items||Defines default value of align-self for items in container. Must be applied to container.|