參考文章:https://www.runoob.com/w3cnote/flex-grammar.html

Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為Flex布局。行內(nèi)元素也可以使用Flex布局。
采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項(xiàng)目（flex item），簡稱”項(xiàng)目”。

容器默認(rèn)存在兩根軸：主軸（main axis）和交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。

項(xiàng)目默認(rèn)沿主軸排列。單個項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。

6個屬性

• flex-direction
  決定主軸方向,即項(xiàng)目排列方向
• flex-wrap
  默認(rèn)情況下，項(xiàng)目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
• flex-flow
  flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap。
• justify-content
  justify-content屬性定義了項(xiàng)目在主軸上的對齊方式。
• align-items
  align-items屬性定義項(xiàng)目在交叉軸上如何對齊。
• align-content
  align-content屬性定義了多根軸線的對齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。