Question

我的目标是拉伸一行弹性项目以填充容器的剩余空间。需要注意的是，容器中的第一项必须保持设定的宽度。

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

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

仅供参考，我在最新的Chrome中测试了这一点。我的代码可能还没有应用所有供应商前缀。

编辑：我在嵌套灵活盒方面取得了一些成功。在弹性框中做一个弹性框似乎可以得到我想要的结果：http://codepen.io/jimmykup/pen/NqZaGa但是如果我不需要添加额外的HTML和CSS来实现这种效果，我真的更喜欢它。有更清洁的方法吗？

Answer 1

问题在于flex-basis设置main size的初始flex item，然后根据弹性因素分配可用空间。

由于您使用的是列布局，因此主要尺寸为height，而不是width。

因此，最好使用行布局。然后，要在粉红色弹性项目中分配Flex容器中剩余的剩余空间，请将其flex-grow因子设置为正值。

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

＆＃13;

*, *: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;
}

＆＃13;

<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>

＆＃13;

我如何使用align-items：stretch;在Flexbox中，当我的一个项目需要设置宽度？

1 个答案: