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;
  ​​​​}