分享我的在項目使用flex佈局封裝好的樣式類

下面分享我的在項目使用flex佈局封裝好的樣式類

flex佈局示例和源碼

1、基本概念

採用 Flex 佈局的元素，稱爲 Flex 容器（flex container），簡稱"容器"。它的全部子元素自動成爲容器成員，稱爲 Flex 項目（flex item），簡稱"項目"。

2、容器的屬性

• flex-direction

  flex-direction屬性決定主軸的方向

  

• flex-wrap

  若是一條軸線排不下，定義如何換行。

  

• flex-flow

  flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

• justify-content

  justify-content屬性定義了項目在主軸上的對齊方式。

  

• align-items

  align-items屬性定義項目在交叉軸上如何對齊

  

• align-content

  align-content屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。