FLEX佈局

main axis – it is not necessarily horizontal

main size – The flex item’s main size property is either the ‘width’ or ‘height’ property, whichever is in the main dimension.

PROPERTIES FOR THE PARENT

DISPLAY

CSS columns have no effect on a flex container.

FLEX-DIRECTION

1. .container {
2. flex-direction: row | row-reverse | column | column-reverse;
3. }

FLEX-WRAP

nowrap (default): single-line 

wrap: multi-line

FLEX-FLOW

JUSTIFY-CONTENT

space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides.The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.

https://jsfiddle.net/loebmraz/646kogLf/

 

ALIGN-ITEMS

https://jsfiddle.net/loebmraz/4pxqfm1t/

ALIGN-CONTENT

https://jsfiddle.net/loebmraz/u240Lmcj/

PROPERTIES FOR THE CHILDREN

ORDER

https://jsfiddle.net/loebmraz/43yLtkh4/

FLEX-GROW

If all items have  flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

https://jsfiddle.net/loebmraz/wb27mcqn/

FLEX-SHRINK

FLEX-BASIS

The  auto keyword means 「look at my width or height property」 (which was temporarily done by the  main-size keyword until deprecated). The  content keyword means 「size it based on the item’s content」

Not well supported yet.

FLEX

It is recommended that you use this shorthand property.

ALIGN-SELF

This allows the default alignment (or the one specified by  align-items) to be overridden for individual flex items.

Note that  float,  clear and  vertical-align have no effect on a flex item.