Flexbox:填充剩余空间但仍然换行

Question

有没有办法告诉flexbox项目填充剩余的空间,但是一旦它们变得比它们的内容小,就会换行.

但是有些项目具有固定的百分比宽度.

HTML

<div class="grid">
  <div class="grid__item">column auto</div>
  <div class="grid__item one-third">column 33.333%</div>
  <div class="grid__item one-third">column 33.333%</div>
  <div class="grid__item">column auto</div>      
</div>

CSS

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background: gray;
}

.grid__item {
  background: red;
  flex: 1;
}

.one-third {
  flex-basis: 33.333%;
  background: green;
}

我希望固定宽度项目(绿色)的宽度始终为33.333%.其他项目(红色)应填充剩余空间.如果屏幕变小,我希望在没有足够空间展示其内容时将项目换行.

我以为我可以简单地在容器上使用flex: 1和flex-wrap: wrap做这样的事情,但正如你可能在笔中看到它根本不包装.如果我删除flex: 1在.grid__item他们那种包裹,但并不是所有的方式,以非常小的屏幕尺寸.

Answer 1

你当然可以允许包装,但我不完全确定你的效果是什么.如果你有一个关于你如何期待这个包裹的图像我们可以从那里增强.

Codepen演示

* {
  box-sizing: border-box;
}
.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background: gray;
}
.grid__item {
  background: red;
  flex: 1 0 auto;
  padding: 1em;
}
.one-third {
  flex: 0 0 33.333%;
  background: green;
  border: 1px solid lightgreen;
}

<div class="grid">
  <div class="grid__item">Lorem ipsum dolor sit amet</div>
  <div class="grid__item one-third">column 33.333%</div>
  <div class="grid__item one-third">column 33.333%</div>
  <div class="grid__item">Lorem ipsum dolor sit amet,</div>
</div>