css - 我如何使用对齐项 : stretch; in Flexbox when one of my items needs to be a set width?

Question

我的目标是让单行 flex 元素拉伸(stretch)以填充容器的剩余空间。需要注意的是，容器中的第一项必须保持设定的宽度。

这是一个代码笔来向您展示我的意思:http://codepen.io/jimmykup/full/zGVdem/

我正在使用 align-items:stretch 让所有粉红色方 block 填充其 1000px 容器的剩余部分，并使它们的文本值之间的距离相同。您会注意到我的红色固定宽度容器设置为 400 像素宽，但它并没有产生那种效果。

仅供引用，我正在最新的 Chrome 中对此进行测试。请注意，我的代码笔可能尚未应用所有供应商前缀。

编辑:我在嵌套 flexbox 方面取得了一些成功。在 flex-box 中做 flex-box 似乎得到了我想要的结果:http://codepen.io/jimmykup/pen/NqZaGa但如果我不必添加额外的 HTML 和 CSS 来实现这种效果，我真的更喜欢它。有没有更简洁的方法来做到这一点？

Answer 1

问题是 flex-basis设置初始 main size的 flex item , 在根据 flex 因子分配可用空间之前。

因为您使用的是列布局，所以主要尺寸是高度，而不是宽度。

所以最好改用行布局。然后，为了将 flex 容器中剩余的剩余空间分配给粉红色的 flex 元素，设置它们的 flex-grow因素为正值。

.flex-container {
  flex-flow: row nowrap; /* Row layout (default value) */
}
.flex-item {
  flex-grow: 1; /* Distribute remaining space equally */
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  max-width: 1000px;
  width: 100%;
  height: 50px;
  margin: 20px;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}
.stretch li {
  background: hotpink;
}
.flex-item {
  box-shadow: inset 0 0 0px 1px rgba(0, 0, 0, 0.3);
  height: 50px;
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: .75em;
  text-align: center;
  flex-grow: 1;
}
.stretch .set-width {
  flex: 0 0 400px;
  background: red;
}

<ul class="flex-container stretch">
  <li class="set-width flex-item">Set Width (400px)</li>
  <li class="flex-item">2</li>
  <li class="flex-item">Large Text Item</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">Very Large Text Item</li>
</ul>