使用 CSS 排版 - Flex 屬性

Flexbox

CSS 常見的排版方式之一，Flex 中分為外部容器與內部元件，外部容器設定 display: flex。

<style>
    .box {
        display: flex;
    }

    .inbox {
        width: 100px;
        height: 100px;
    }

    .inbox-big {
        width: 100px;
        height: 100px;
    }
</style>

<div class="box">
    <div class="inbox">1</div>
    <div class="inbox-big">2</div>
    <div class="inbox">3</div>
    <div class="inbox-big">4</div>
    <div class="inbox">5</div>
</div>

flex-direction

設置內部元件排序方向。

• 左→右(預設):
  flex-direction : row
  
• 右→左:
  flex-direction : row-reverse
• 上→下:
  flex-direction : column

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

  
• 下→上:
  flex-direction : column-reverse

flex-wrap

設置元件超出容器時，是否換行。

• 換行:
  flex-wrap : wrap

  .box {
      display: flex;
      flex-wrap: wrap;
  }
  
  .inbox {
      width: 300px;
      height: 100px;
  }
  
  .inbox-big {
      width: 300px;
      height: 100px;
  }

  
• 不換行:
  flex-wrap : nowrap
• 換行反轉:
  flex-wrap : wrap-reverse

justify-content

設置內部元件水平對齊方式。

• 預設值，對齊到開頭
  justify-content : flex-start
• 對齊到結尾
  justify-content : flex-end
• 水平置中
  justify-content : center

  .box {
      display: flex;
      justify-content:center;
  }

  
• 平均分配內容元素，左右的內部元件貼齊外部容器
  justify-content : space-between

  .box {
      display: flex;
      justify-content:space-between;
  }

  
• 平均分配內部元件、間距
  justify-content : space-around

  .box {
      display: flex;
      justify-content:space-around;
  }

  

align-items

設置內部元件垂直對齊方式。

• 對齊最上方
  align-items : flex-start
• 對齊最下方
  align-items : flex-end
• 垂直置中
  align-items : center

  .box {
      display: flex;
      align-items: center;
  }

  
• 內部元件全部撐開至 Flexbox 的高度(預設)
  align-items:stretch;
• 以所有內部元件內容的基線作為對齊標準
  align-items:baseline;

  .box {
      display: flex;
      align-items: baseline;
  }
  
  .inbox {
      width: 100px;
      height: 100px;
  }
  
  .inbox-big {
      width: 100px;
      height: 300px;
      font-size: 50px;
  }

  

align-content

適用於多行元素的垂直對齊方式。

• flex-start
• flex-end
• center
• space-between
• space-around
• stretch (預設)

flex-grow

伸展(空間足夠時，依數字做相應比例分配)，使用在內部元件上
預設值為 0，不伸展

.box {
    display: flex;
}

.inbox {
    width: 100px;
    height: 100px;
    flex-grow: 2;
}

.inbox-big {
    width: 100px;
    height: 100px;
    font-size: 50px;
}

flex-shrink

壓縮(空間不足時，依數字做相應比例分配)，使用在內部元件上
預設值為 1，會彈性壓縮

align-self

調整個別內部元件的垂直對齊設定，使用在內部元件上
設定值與 align-items 相同

.box {
    display: flex;
    height: 300px;
}

.inbox {
    width: 100px;
    height: 100px;
}

.inbox-big {
    width: 100px;
    height: 100px;
    font-size: 50px;
    align-self: flex-end;
}

order

重新定義元件的排列順序(依設置數字大小)，使用在內部元件上

.box {
    display: flex;
    height: 300px;
    border: 2px blueviolet solid;
    text-align: center;
    font-size: large;
    font-weight: bold;
}

.inbox {
    width: 100px;
    height: 100px;
    order: 0;
}

.inbox-big {
    width: 100px;
    height: 100px;
    font-size: 50px;
    order: 1;
}