html - Flex 行包含 5 个 div，其中一个具有静态宽度，其他四个具有百分比

Question

我有一行 5 列。第一列是个人资料图片，我希望其宽度保持恒定 150 像素。其他四个有各种输入/按钮，我希望它们每个都是基于 % 的，并且 flex 增长以填充剩余空间，而第一列应始终保持在 150px。

我当前的设置是:

<div class="flex-row">
    <div class="column-1">content</div>
    <div class="column-2">content</div>
    <div class="column-3">content</div>
    <div class="column-4">content</div>
    <div class="column-5">content</div>
</div>

CSS

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.column-1 {
  width: 150px;
}
.column-2 {
  width: 20%;
  flex-grow: 1;
}
.column-3 {
  width: 25%;
  flex-grow: 1;
}
.column-4 {
  width: 20%;
  flex-grow: 1;
}
.column-5 {
  width: 15%;
  flex-grow: 1;
}

现在显然这不起作用，但你可以看到我的目的。我正在使用 Sass，所以很乐意在其中进行一些计算。我尝试做一些类似 100% - 150px 的事情，但不太清楚如何让它变得活跃。

1) 如何创建 5 列布局，其中第 1 列是静态宽度，其余 4 列是剩余宽度的百分比？

Answer 1

在此修改后的布局中，第一列(个人资料图片)始终为 150 像素。其他四个 flex 元素在它们之间平均分配剩余空间。

这是您需要的所有 CSS:

.flex-row { display: flex; flex-wrap: wrap; }
.column-1 { flex: 0 0 150px; }
.column-2 { flex: 1 1 auto; }
.column-3 { flex: 1 1 auto; }
.column-4 { flex: 1 1 auto; }
.column-5 { flex: 1 1 auto; }

演示:https://jsfiddle.net/mLtwmc62/17/

带有解释的相同代码:

.flex-row {
    display: flex;
    flex-wrap: wrap; /* remove if you want to force all flex items on same row */
}

.column-1 {
    /* width: 150px; remove; use flex property instead */
    flex: 0 0 150px; /* don't grow, don't shrink, stay at 150px */
}

.column-2 {
   /* width: 20%; use flex-basis instead */
   /* flex-grow: 1; use flex property instead */
  flex: 1 1 auto; /* grow evenly, shrink evenly, start at natural width; see NOTES below */
}

.column-3 {
    /* width: 25%; */
    /* flex-grow: 1; */
    flex: 1 1 auto;
}

.column-4 {
    /* width: 20%; */
    /* flex-grow: 1; */
    flex: 1 1 auto;
}

.column-5 {
    /* width: 15%; */
    /* flex-grow: 1; */
    flex: 1 1 auto;
}

注释:

如果您希望对 Flex 元素应用唯一的宽度(代码中具有不同的宽度百分比)，这里有两个选项:

• 使用flex-basis属性，这是 flex 中的第三个值属性(property)。 flex-basis 设置 Flex 元素的初始大小。因此，您可以使用 flex: 1 1 20% 代替 flex: 1 1 auto;。

• 使用flex-grow属性(flex 中的第一个值)。 flex-grow 告诉每个 Flex 元素应占用剩余空间的比例。这是一个例子:

   .column-1 { flex: 0 0 150px; }
   .column-2 { flex: 2 1 auto; }
   .column-3 { flex: 5 1 auto; }
   .column-4 { flex: 3 1 auto; }
   .column-5 { flex: 1 1 auto; }
  

  演示:https://jsfiddle.net/mLtwmc62/18/