html - 5 个 div 的 Flex 行，一个具有静态宽度，另外四个具有百分比

Question

我有一行有 5 列。第一列是个人资料图片，我希望它的宽度保持在 150 像素不变。其他四个有各种输入/按钮，我希望它们每个都基于 % 并灵活增长以填充剩余空间，同时第一列应保持在 150 像素。

我当前的设置是:

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