javascript - 如何创建 4 列的布局，其中一列具有动态宽度而其他 3 列是均匀的？

Question

我不确定解决此问题的最佳方法是什么。我需要 4 列的布局，第一列的宽度未知(动态)，其他 3 列应均匀填充剩余空间。棘手的部分是所有列必须是彼此的直接兄弟。

最好是纯css方案

Answer 1

Flexbox 可以做到这一点......

.parent {
  display: flex;
  margin-bottom: 1em;
}
.big {
  height: 100px;
  border: 1px solid grey;
  background: lightblue;
  flex: 1 0 auto;
}
p {
  white-space: nowrap;
  ;
}
.box {
  flex: 0 1 33%;
  border: 1px solid grey;
}

<div class="parent">
  <div class="big">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="parent">
  <div class="big">
    <p>Lorem ipsum dolor sit amet</p>
  </div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>