CSS-在容器中分配並行空間(flex)

使用時機

希望容器之內的物件可以並行接續排列，並且每個物件都有固定比例占據該容器

CSS語法

• 外層容器的display屬性為flex

  .container{
      display: flex;
  }

• 在內層物件中，各自定義佔據的寬度或剩餘空間的分配比例

• 當 ==外層容器的空間足夠== 的情況：

  • box1有設定width，會佔據固定寬度300px
  • box2有設定width，會佔據固定寬度200px

  • box3、box4沒有設定固定寬度，僅設定flex比例，則會依比例分配剩餘的空間

    

• 為了避免 ==外層容器空間不足== ，可以min-width輔助定義最小的寬度

  • box2因為沒有設定min-width，所以被擠壓到完全沒有空間
    

定義是否自動換行(flex-wrap)

• 定義「不換行」（flex-wrap預設值即為no-wrap，可省略不寫），可能會壓縮內層物件的寬度
  

  .container{
      display: flex;
      flex-wrap: no-wrap;
  }

• 定義「自動換行」
  

  .container{
      display: flex;
      flex-wrap: wrap;
  }

• 定義「換行後反轉」
  

  .container{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap-reverse;
  }

定義排序方向(flex-direction)

• 定義排序方向為「左到右」（flex-direction預設值即為row，可省略不寫）

  

  .container{
      display: flex;
      flex-direction: row; 
  }

• 定義排序方向為「右到左」
  

  .container{
      display: flex;
      flex-direction: row; 
  }

• 定義排序方向為「上到下」
  

  .container{
      display: flex;
      flex-direction: column;
  }

• 定義排序方向為「下到上」
  

  .container{
      display: flex;
      flex-direction: column-reverse;
  }