一：display
display: flex
flex是Flexible Box的縮寫(xiě)蔫浆，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性软啼。 任何一個(gè)容器都可以指定Flex容器。現(xiàn)在所有的瀏覽器都支持該布局延柠。
基本概念:
采用Flex布局的元素祸挪，稱為Flex容器（flex container），簡(jiǎn)稱"容器"贞间。它的所有子元素自動(dòng)成為容器成員贿条，稱為Flex項(xiàng)目（flex item），簡(jiǎn)稱"項(xiàng)目"增热。
flex.png
容器默認(rèn)存在兩根軸：水平的主軸(main axis)和垂直的交叉軸(cross axis)整以。
1: 主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end.
2: 交叉軸的開(kāi)始位置叫做cross start峻仇，結(jié)束位置叫做cross end.
3: 項(xiàng)目默認(rèn)沿主軸排列公黑。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size.
二：
設(shè)置在該容器上的屬性如下:
1: flex-direction
flex-direction屬性：項(xiàng)目的排列方向
row: 主軸水平方向，起點(diǎn)為左端(默認(rèn))
row-reverse: 主軸水平方向凡蚜，起點(diǎn)為右端
column: 主軸垂直方向人断，起點(diǎn)為上邊沿
column-reverse: 主軸垂直方向，起點(diǎn)為下邊沿
2: flex-wrap
flex-wrap屬性：定義換行狀況
nowrap: 不換行
wrap: 換行朝蜘，第一行在上面
wrap-reverse: 換行恶迈，第一行在下面
3: flex-flow
flex-flow屬性：flex-direction和flex-wrap的簡(jiǎn)寫(xiě)，默認(rèn)row nowrap
4: justify-content
justify-content定義在主軸上的對(duì)齊方式
flex-start（默認(rèn)值）：在主軸上由左或者上開(kāi)始排列
flex-end：在主軸上由右或者下開(kāi)始排列
center：在主軸上居中排列
space-between：在主軸上左右兩端或者上下兩端開(kāi)始排列
space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等谱醇，即項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍
5: align-item
align-items屬性：定義在交叉軸上的對(duì)齊方式
flex-start | flex-end | center | baseline | stretch
align-item.png
6: align-content
align-content: flex-start | flex-end | center | space-between | space-around | stretch
align-content.png
