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

Posted 2023-03-06

【中文标题】Flexbox：如何在列上组合百分比、像素和剩余高度？

【英文标题】：Flexbox: How to Combine percent, pixels and remaining height on columns?

【发布时间】：2015-03-21 08:12:30

【问题描述】：

我正在构建基本的网格系统，需要组合以不同尺寸单位描述的弹性项目的高度，即 %、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

【参考方案1】：

使用flex-grow 参数（flex 速记属性中的第一个参数）：

HTML：

<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

【讨论】：

这正是我尝试过的...设置只为一个元素增长。我不确定这是否是一种正确的方法，但它确实有效。

当然这是正确的方法：你说 3 个元素不会增长 (0) 而一个应该增长 (1)。