主題：我對css的flex的佈局的理解

要點意義：稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員

主要的屬性：

• flex-direction   //主軸的盒子排列方向
  • row（預設值）：主軸為水平方向，起點在左端。
  • row-reverse：主軸為水平方向，起點在右端。
  • column：主軸為垂直方向，起點在上沿。
  • column-reverse：主軸為垂直方向，起點在下沿。
• flex-wrap    //框架內子元素的換行方式   

  例子：.box{
    flex-wrap: nowrap | wrap | wrap-reverse; }
   
  

• flex-flow  
• justify-content   //定義了專案在主軸上的對齊方式

  例子：.box { justify-content: flex-start | flex-end | center | space-between | space-around; }

  • flex-start（預設值）：左對齊
  • flex-end：右對齊
  • center： 居中
  • space-between：兩端對齊，專案之間的間隔都相等。
  • space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
• align-items    //屬性定義專案在交叉軸上如何對齊。

  例子：.box { align-items: flex-start | flex-end | center | baseline | stretch; }

  • flex-start：交叉軸的起點對齊。
  • flex-end：交叉軸的終點對齊。
  • center：交叉軸的中點對齊。
  • baseline: 專案的第一行文字的基線對齊。
  • stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
• align-content   //定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用

  例子：.box {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
   
  

  • flex-start：與交叉軸的起點對齊。
  • flex-end：與交叉軸的終點對齊。
  • center：與交叉軸的中點對齊。
  • space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
  • space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
  • stretch（預設值）：軸線佔滿整個交叉軸。
  • -------------------------------------------------------------------------------------------------------------------------------------------------案例線--------------------------------------------------------------------------------------------------------------------------------------------------------------------
  • 程式碼如下

  • ul{
      display: flex;         
    }
    li{
      flex: 1;
      text-align: center;
      line-height: 100px;
    }

  • 效果：