建立 2025-02-25 更新 2026-09-11

Flexbox 彈性佈局

在容器上設 display: flex，只有一層直接子元素變成 flex item。先決定主軸方向，再用對齊與 flex 分配空間。

啟用

<div class="toolbar">
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>

.toolbar {
  display: flex;
  gap: 0.5rem;
}

預設 flex-direction: row，子元素由左到右、高度被 stretch 拉齊。

交叉軸永遠垂直於主軸：row 時交叉軸是垂直方向。

單顆 item 可用 align-self 覆寫。

預設 nowrap 會把子元素擠在一行。wrap 後，多出來的列再用 align-content 分配（只有多行時才有感）。

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

flex 是 flex-grow、flex-shrink、flex-basis 的縮寫。

.search { flex: 1 1 12rem; } /* 可長大、可縮小，基準 12rem */
.logo { flex: 0 0 auto; }    /* 不搶剩餘空間 */

width 與 flex-basis

在主軸是水平時，flex-basis 優先於 width（除非 basis 是 auto）。想做「最小 12rem、有空就長大」用 flex: 1 1 12rem 搭配 min-width: 0（讓它可以在 Grid/Flex 裡縮小，避免撐破）。

order 可改視覺順序，但會讓鍵盤 Tab 與畫面不一致，無障礙上要小心。

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
}

.layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.side { flex: 1 1 14rem; }
.main { flex: 2 1 20rem; }

.header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.header .actions { margin-inline-start: auto; }

二維版面請接 Grid。