CSS -
Flexbox

Updated at 2018-03-10 06:18

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-flex turns all direct children to flex items.
flex-direction: row|row-reverse|column|column-reverse defines how the items are laid out e.g. left-to-right.
flex-wrap: nowrap|wrap|wrap-reverse defines 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-around defines horizontal alignment rules.
align-items: flex-start|flex-end|center|baseline|stretch defines vertical alignment rules.
align-content: flex-start|flex-end|center|space-between|space-around|stretch defines 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>|auto defines 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|stretch overwrites parent vertical alignment rule for this element.

flex-basis is initial size of a flex item.

Default is flex-basis: auto which 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.
flex-grow: 1; flex-basis: 0; would make all flex items equally large.

Sources