CSS - Flexbox
The main idea behind the flex layout is to give the container the ability to alter its items' width/height/order to best fill the available space.
Support is good in modern browsers (97.71%). The only one struggling is IE 11 but basic functionality works.
Some of the properties are meant to be set on the parent, some on children. The parent is called "flex container", children "flex items".
Flex container properties overview:
display: flex|inline-flexturns all direct children to flex items.
flex-direction: row|row-reverse|column|column-reversedefines how the items are laid out e.g. left-to-right.
flex-wrap: nowrap|wrap|wrap-reversedefines whether automatic line breaks should be added and in which direction.
flex-flow: <direction> <wrap>is shorthand for direction and wrap.
justify-content: flex-start|flex-end|center|space-between|space-arounddefines horizontal alignment rules.
align-items: flex-start|flex-end|center|baseline|stretchdefines vertical alignment rules.
align-content: flex-start|flex-end|center|space-between|space-around|stretchdefines vertical alignment rules of item rows.
Flex item properties overview:
flex-grow: <number>defines how much is the item allowed to grow when required.
flex-shrink: <number>defines how much is the item allowed to shrink when required.
flex-basis: <length>|autodefines the size of the item before remainder space is distributed.
flex: <grow> <shrink> <basis>shorthand for the 3 properties above.
order: <integer>default order is order in the HTML.
align-self: auto|flex-start|flex-end|center|baseline|stretchoverwrites parent vertical alignment rule for this element.
flex-basis is initial size of a flex item.
- Default is
flex-basis: autowhich means that the initial size of a flex item is the size of its the contents.
- All remaining space is distributed proportionally based on
flex-grow: 1; flex-basis: 0;would make all flex items equally large.