了解flexbox屬性項最簡單的方法是將flexbox屬性分成兩個組：

flex容器屬性

flex item 屬性

下面我們將分組來解釋他們是如何影響布局。

flex容器屬性

• flex-direction

這個屬性主要設(shè)置flex容器的主軸方向，指定flex項目在flex容器中的排列方式。flex容器的主軸方向主要有水平和縱向兩種。

flex-direction:row;

從左向右排在一行

flex-direction ：column ;

按列排列

flex-direction ：row-reverse ;

反向排列

• flex-wrap

flex項目在flex容器中默認(rèn)是只顯示一行。如果希望控制flex項目在flex容器中按一行或多行排列，可以使用flex-wrap
屬性。

flex-wrap : nowrap ;

根據(jù)屏幕自動縮放大小

flex-wrap : wrap ;

根據(jù)每個子item動態(tài)布局

• flex-flow

這個屬性是flex-direction和flex-wrap屬性的簡寫。
默認(rèn)值：row nowrap

• justify-content

屬性用來指定flex項目在flex容器沿著主軸在當(dāng)前行的對齊方式。

justify-content: flex-start;

flex項目向flex容器的左邊靠齊。

justify-content: flex-end;

flex項目向flex容器的右邊靠齊。

justify-content: center;

Flex項目在flex容器中居中對齊。

justify-content:space-between

Flex項目之間間距相對，第一個和最后一個flex項目向flex容器的邊緣對齊.

justify-content:space-around

Flex項目前后相等的空間顯示在flex容器中。第一個Flex項目左邊的間距和最后一個Flex項目右邊的間距是其他相相鄰flex項目之間間的一半。

• align-items

Flex項目在容器側(cè)軸對齊方式，類似于justify-content
，只不過不是水平方向，而是縱向。這個屬性可以設(shè)置所有flex項目對齊方式，并且包括匿名元素。

align-items:stretch;

Flex項目沿著flex容器側(cè)軸方向填滿整個flex容器高度（或?qū)挾龋?/p>

align-items:flex-start;

Flex項目排列在flex容器側(cè)軸開始處。

align-items:flex-end;

Flex項目排列在flex容器側(cè)軸結(jié)束處

align-items:center;

Flex項目排列在flex容器側(cè)軸中間處

align-items:baseline;

Flex項目按文本基線在flex容器側(cè)軸中排列。

• align-content

align-content
屬性將flex容器內(nèi)的行在flex容器中側(cè)軸排列方式，類似于justify-content,在主軸方向的單個Flex項目對齊方式,Flex項目在flex容器中多行顯示行，其多行在flex容器的側(cè)軸方向?qū)R方式。

align-content:stretch;

Flex項目行在flex容器側(cè)軸按分布式空間排列，

align-content:flex-start;

Flex項目在flex容器側(cè)軸開始處排列。

align-content:flex-end;

Flex項目在flex容器側(cè)軸末尾處排列。

align-content:center;

Flex項目行沿flex容器側(cè)軸中間排列。

align-content:space-between;

Flex項目行與行之間間距相等，并且flex項目行第一行排在flex容器側(cè)軸開始之處，flex項目行最后一行排在flex容器側(cè)軸末尾之處。

align-content:space-around;

Flex項目行的上下間距相等，并且沿flex容器側(cè)軸排列。
Flex項目行上下間距相等，并且flex容器第一行距flex容器側(cè)軸開始處間距是flex項目行與行之間間距一半。同時項目行最后一行距flex容器側(cè)軸末尾處間距是flex項目行與行之間間距一半

Flex項目屬性

• order

屬性是用來控制flex容器中flex項目的排列順序。默認(rèn)情況flex項 目在flex容器的順序是flex項目出現(xiàn)的順序。

• flex-grow

這個屬性用來指定 flex項目的放大比例，其決定了flex項目相對flex容器自由空間進(jìn)行放大。

• flex-shrink

flex-shrink屬性用來指定flex項目縮小比例。決定了flex項目將相對于其他flex項目在flex容器空間不足之下自動收縮。

• flex-basis

這個屬性和width和height屬性相同，用來指定flex項目的大小。

• flex

這個屬性是flex-grow、flex-shrink和flex-basis屬性的簡寫

• align-self

使用align-self屬性可以指定flex項目自身的對齊方式或者使用align-items來指定單個flex項目