Flexbox：如何在列中结合百分比、像素和剩余高度？

Question

Flexbox：如何在列中结合百分比、像素和剩余高度？

7

我将构建一个基本的网格系统，需要将使用不同尺寸单位描述的 flex-items 的高度组合起来，包括 %、px 和剩余空间。

HTML：

<div class="grid">
  <div class="block" style="flex-basis: 50px;">50px</div>
  <div class="block" style="flex-basis: 25%;">25%</div>
  <div class="block">stretch to remaining space?</div>
  <div class="block" style="flex-basis: 50px;">50px</div>
</div>

CSS：

html,body,.grid {
  height: 100%;
  padding: 0;
  margin: 0;
}
.grid {
  width: 300px;
  background: #aaa;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

}
.block {
  outline: solid 1px black;
  flex-grow: 0; // remove growing proportion
  flex-shrink: 0; // remove shrinking proportion
}

工作示例： http://codepen.io/antraxis/pen/zxwgEo

（说明：此为原文，无需翻译）

- Dariusz Sikorski

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Denys Séguret · Accepted Answer

flex 简写属性中的第一个参数 flex-grow 控制元素在 Flex 容器中的放大比例。

<div class="grid">
  <div class="block a">block height 50px</div>
  <div class="block b">block height 25%</div>
  <div class="block c">block height *</div>
  <div class="block d">block height 50px</div>
</div>

CSS：

.block {
  outline: solid 1px black;
}
.a, .d {
  flex: 0 0 50px;
}
.b {
  flex: 0 0 25%;
}
.c {
  flex: 1 0 0;
}

codepen