技術標籤：前端cssflex

flex佈局, 也稱彈性佈局, 是手機端最常用的佈局

在父元素新增display: flex 屬性即可開啟 flex 佈局, 以下為初始程式碼和效果

      div {
        display: flex;
        width: 100%;
        height: 200px;
        background-color: pink;
      }
      span {
        width: 50px;
        height: 50px;
        background-color: skyblue;
      }
 
    
    <div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
    </div>

容器(父元素)常見屬性:

1. flex-direction 設定主軸的方向

• flex-direction: row // 預設是主軸, 也就是 x 軸
  
• flex-direction: column // 是側軸, 也就是 y 軸
  

2. justify-content 是主軸上的對齊方式, 常用的值及效果如下:

• justify-content: center // 居中
  

• justify-content: space-around // 中間間距是兩邊的兩倍
  

• justify-content: space-between // 兩邊貼緊, 中間間距相等
  

• justify-content: space-evenly // 間距相等
  

3. flex-wrap 預設子元素不換行, 為了不改變子元素的寬度, 需要手動換行

• 預設狀態 // 換行前
  

• flex-wrap: wrap // 換行後
  

4. align-items 設定側軸上單行子元素的排列方式—(單行)

• align-items: center
  

5. align-content
   設定側軸上多行子元素的排列方式—(多行)

• 預設狀態
  
• align-content: space-start
  
• align-content: center
  
• align-content: space-around
  
• align-content: space-between
  

專案(子元素)常見屬性

1. flex 表示子元素在剩餘空間中佔幾份;

• flex: 1 // 在不給子元素寬度下, 使子元素各佔一份
  

2. align-self 是某一個子元素在側軸單獨進行排列方式;

• align-self: center // 值與其它對齊方式類似
  

3. order 是某一個子元素單獨進行排列順序;

• order: -1 // 數值預設為0, 越比0小, 排列越前
  

總結:

多練才能熟悉