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

2023年11月3日 239次阅读

我想更好地了解弹性框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>

最佳答案 您只需要为第一个指定固定宽度,然后将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>
点赞