CSS3 Flex Box
Flex-box is a CSS3 layout module , that helps align items, directions and ordering . A flex container can modify the width and heights of it’s children to fill out the space for different screen sizes. The parent container is called the flex container and it’s immediate child are flex items. In following examples I will refer to the flex-container as container and the flex-items as items.
To use the flex-box layout add a display:flex property to the parent element.
To make it compatible with all the different vendor prefixes you can use an auto prefixor.
.container {
display : flex;
}Now all the immediate children are automatically flex items. Flex-box properties can be divided into two groups, one for the container itself and the other for the items. First I will showcase some useful container properties. These properties affect all the immediate children of the container.
Container properties
flex-direction
Sets the direction of the main axis. The default value is row
and the other options include: column , row-reverse and column-reverse. The column property cause items to stack from top to bottom, with the row property items are stacked from right to left.
flex-wrap
By default flex-wrap is set to nowrap, so items will be placed on a single line, and shrunk if their width exceeds the width of the container. The flex-wrap property allowed items to be placed on multiple lines along the main axis.
justify-content
A very useful property, it assigns items along the main axis (as defined by flex-direction). It is useful for distributing free space among the items. The default is flex start, where the items are aligned to the left side of the container.
Other useful properties are space-between and space-around. With space-between the first and last items are assigned to edges and the rest have equal spacing. With space-around , the spacing is equal even around first and last items.
align-items
Similar to justify-content but acts perpendicular to the main axis, the default is stretch which fills the height (if the flex-direction is row) or the width (if the flex-direction is column) of the container.
align-content
distributes space in the perpendicular axis similar to when justify-content aligns individual items within the main axis, useful for multi line items. If there is a single line, the layout is unaffected. It aligns the lines inside the container. Default value is stretch.
Item properties
Item properties have an effect on the selected item. The order , grow and shrink factors, basis and even specific alignments (which override parent alignments) can be set on each item.
align-self
Overrides the align-items property set by the parent for a specified item. The default is auto which inherits the value of align-items.
grow and shrink
The grow factor determines the increase relative to the rest of the items if there is available space (default value is 0). The shrink factor specifies how much the item will decrease in size when there is negative space (default 1). Only positive numbers for valid values.
basis
It is the initial size of the item before space is allocated according to the different flex factors (default is auto).
flex
Shorthand for grow , shrink and flex properties (in that order). For example if we assign (flex : 1 2 auto) , grow factor is 1 , shrink factor 2 and basis is auto. We can also set (flex : none) -> (0 0 auto) or (flex : auto) -> (1 1 auto) . The default for the flex property is 0 1 auto.
order
Initially all items are placed in group 0 . The group is ordered in ascending order and if the order is the same, the order in which the html was written determines the order. Negative numbers are permitted, so setting a value of -1 to an item would make it the first item in the container, along the specified axis.
base-line
The baseline of the content is aligned
Conclusion
Many developers find flex-box layout easier to use. Positioning elements is simpler and therefore complex layouts can be achieved with less code. Flex-box is direction based , it is useful for small app components.
