【CSS】Flexbox Layout

文章目錄

Flexbox 配置單一方向上，項目的排列和分佈，特別適合處理一組不同大小的項目。

The main axis and the cross axis

Main Axis

主軸（Main Axis）決定項目的排列方向，由 flex-direction 屬性設定。

項目排列方向受到書寫方向 direction 與 writing-mode 屬性的影響。

以中英語來說，書寫方向為由左至右、由上至下， 也就是在writing-mode: horizontal-tb; direction: ltr的情況下，在父容器設定 flex-direction

  • row： 主軸為水平方向，項目由左到右排列。
  • row-reverse： 主軸為水平方向，項目由右到左排列。
  • column： 主軸為垂直方向，項目由上到下排列。
  • column-reverse： 主軸為垂直方向，項目由下到上排列。
.container {
  display: flex;
  flex-direction: column;
}

flex-wrap：控制主軸上的項目是否允許多行，並可設置多行方向。

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

flex-flow：同時設定 flex-direction 和 flex-wrap 屬性。

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

Cross Axis

交叉軸（Cross Axis）為垂直於主軸的方向：

  • 如果主軸是水平方向，交叉軸就是垂直方向。
  • 如果主軸是垂直方向，交叉軸就是水平方向。

Distribute Space and Align Items

Distribute space inside flex items

  • flex：擴展或收縮子項目以適應父容器中的剩餘空間，由 flex-basis、flex-grow、flex-shrink 屬性組成。
  • flex-basis：控制子項目在主軸方向上的初始大小。
  • flex-grow：控制子項目以父容器的剩餘空間擴展。
  • flex-shrink：當所有子項目的長度總和，超出父容器長度時，收縮子項目。
/* flex: flex-grow flex-shrink flex-basis */
/* 預設保持子項目原有大小 */
flex: initial;
flex: 0 1 auto;

/* 每個子項目的大小依其 max-content 分配父容器的剩餘空間 */
flex: auto
flex: 1 1 auto;

/* 每個子項目的大小依父容器剩餘空間均等分配 */
flex: 1
flex: 1 1 0;