flex: 1; 的具體含義 - daniel-qa/Vue GitHub Wiki

flex: 1; 的具體含義

什麼時候用 flex: 1;？

1. 均匀分配剩余空间

当需要让多个元素平均分配父容器的剩余空间时，可以使用 flex: 1;：

<template>
  <div style="display: flex; height: 100px; border: 1px solid #ccc;">
    <div style="flex: 1; background-color: lightblue;">區塊 1</div>
    <div style="flex: 1; background-color: lightgreen;">區塊 2</div>
    <div style="flex: 1; background-color: lightcoral;">區塊 3</div>
  </div>
</template>
  • 結果：三個子元素平分父容器的寬度。

2. 让单个子元素占用所有剩余空间

当某个子元素需要占用容器中所有剩余空间时，可以使用 flex: 1;：

<template>
  <div style="display: flex; height: 100px; border: 1px solid #ccc;">
    <div style="background-color: lightblue; width: 100px;">固定區塊</div>
    <div style="flex: 1; background-color: lightgreen;">彈性區塊</div>
  </div>
</template>

結果：第一个区块宽度固定为 100px，第二个区块占用剩余所有宽度。

3. 自适应布局

当某些子元素需要根据剩余空间动态变化，而其他元素保持固定大小时：

<template>
  <div style="display: flex; height: 100px; border: 1px solid #ccc;">
    <div style="width: 150px; background-color: lightblue;">固定大小</div>
    <div style="flex: 1; background-color: lightgreen;">自適應大小</div>
    <div style="width: 150px; background-color: lightcoral;">固定大小</div>
  </div>
</template>

結果：中间的区块会根据父容器的大小动态伸缩，而两边的区块宽度固定。

flex: 1 的寫法等價於：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
flex-grow: 1

該元素會占用父容器中所有剩餘空間的 1 倍份額（和其他元素的 flex-grow 比例比較）。

flex-shrink: 1

如果父容器空間不足，該元素會按比例縮小。

flex-basis: 0

該元素的初始主軸尺寸為 0，剩餘空間完全由 flex-grow 決定。

⚠️ **GitHub.com Fallback** ⚠️