CSS tutorial

Flex model

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

flexible container

css property description
display For using flex model set one of the following values:
  • flex - flexible container for block elements
  • inline-flex - flexible container for inline elements
Read more about display property.
flex-direction Selects direction of layout. Possible values:
  • row - horizontal direction from left to right (default value)
  • row-reverse - horizontal direction from right to left
  • column - vertical direction from top to down
  • column-reverse - vertical direction from down to top
flex-wrap Sets whether flex items are forced onto one line or can wrap onto multiple lines. Possible values:
  • nowrap - items are laid out in a single line
  • wrap - items are laid out in multiple lines when necessary
  • wrap-reverse - reverse version of wrap
flex-flow Shorthands for flex-direction and flex-wrap properties. 
div {flex-flow: column wrap;}
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.

css property description
justify-content Defines how to justify content in a flexible container along main axis. Must be applied to container. Possible values are:
  • flex-start, start - arranges items from the beginning of the direction (default value)
  • flex-end, end - arranges items from the end of the direction
  • center - items are centered along the line
  • space-evenly - items are evenly arranged along the line. They have equal space around them.
  • space-between - items are evenly arranged along the line. First and last items on the line are aligned to edge of container.
  • space-around - items are evenly arranged along the line. They have half-size space around them. It means that space between first/last item and container on line equal to half space between items.
  • stretch - items are evenly arranged along the line. Items will be stretched to fit container.
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.

css property description
align-content Defines how to align content along cross axis. Must be applied to container. Possible values are:
  • flex-start, start - arranges items from the beginning of cross axis (default value)
  • flex-end, end - arranges items from the end of the cross axis
  • center - items are centered along the cross axis
  • baseline - arranges items so that their baselines line up with the baseline of the container.
  • stretch - items will be stretched to fit container in the cross axis.
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.