CSS Flexbox 三列布局，其中第一列宽度固定

Question

我正在努力理解弹性盒子CSS，并为所有页面设计主要布局。它有三列，其中第一列是固定宽度，其他两列可以是任何大小，只要所有三列占据100％的宽度。

我认为问题出在.col类中，但不确定如何设置第一列并让其他列增长。谢谢。

.wrapper {
  display: flex;
  flex-direction: row;
}

.col {
  flex-basis: 25%;
  align-items: stretch;
}

<div class="wrapper">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
</div>

- user9278880

---

请查看此处的“flex-shrink因子”：https://dev59.com/4FsX5IYBdhLWcg3wALba - Michael Benjamin

@Michael_B 非常有帮助，这澄清了事情。谢谢！ - user9278880

Answer 1

您只需为第一个元素指定固定宽度，然后将flex:1设置为另一个元素，使它们占据剩余空间并填充容器空间的100%：

.wrapper {
  display: flex;
  flex-direction: row;
}


.col {
  flex: 1;
  background: red;
}
.col:first-child {
  width: 100px; /* Or a percentage value */
  flex:initial;
  background: green;
}

<div class="wrapper">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
</div>

- Temani Afif

---

我知道这只是一个简单的修复。谢谢！如果我的问题再得到一个赞，我就可以给你一个了。 - user9278880