flex

display: flex;
display: -webkit-flex; /* Safari */
display: inline-flex

order

order: 1;

1. 所有 flex 項預設的 order 值是 0。
2. order 值大的 flex 項比 order 值小的在顯示順序中更靠後。

flex-direction

指定了內部元素是如何在 flex 容器中佈局的

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap

指定 flex 元素單行顯示還是多行顯示

flex-wrap: nowrap | wrap | wrap-reverse;
 

flex-flow

flex-direction 和 flex-wrap 的簡寫

flex-flow: <flex-direction> <flex-wrap>;

flex-grow

flex增長係數

flex-grow: <number>;

flex-shrink

flex 元素的收縮規則(flex 元素僅在預設寬度之和大於容器的時候才會發生收縮)

flex-shrink: <number>;

flex-basis

flex 元素在主軸方向上的初始大小

flex-basis: auto | <length>;

flex

flex-grow，flex-shrink和flex-basis的縮寫

flex: <flex-grow> <flex-shrink> <flex-basis>;

align-item

交叉軸方向上的對齊方式

align-item: normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ];

<self-position> = center | start | end | self-start | self-end | flex-start | flex-end

<baseline-position> = [ first | last ]? baseline

<overflow-position> = unsafe | safe
/* 常用 */
align-item: normal | stretch | center | flex-start | flex-end;
 

justify-content

彈性容器主軸的元素之間的空間分配方式

justify-content: normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ];

where

<content-distribution> = space-between | space-around | space-evenly | stretch

<content-position> = center | start | end | flex-start | flex-end

<overflow-position> = unsafe | safe
/* 常用 */
justify-content: normal | space-between | space-around | space-evenly | stretch | center | flex-start | flex-end;