html - css flexbox 3列布局，其中第一个是固定宽度

Question

我试图更好地理解 flex box CSS 并为所有页面设置主布局。它是 3 列，其中第一列是固定宽度，其他列可以是任意大小，只要所有 3 列都占 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>

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>