5 div的伸缩行，一个具有静态宽度，另外四个具有百分比

Question

我有一行5列。第一列是一张个人资料图片，我想保持恒定的150px宽度。其他四个有各种各样的输入/按钮，我希望它们每个都是基于%和弹性增长来填充剩余的空间，而第一列应该保持在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列布局与第一个是静态宽度和剩余的4是剩余宽度的百分比?

Answer 1

在这个修改后的布局中，第一列(头像)始终是150px。其他四个伸缩项在它们之间平均分配剩余空间。

这是你需要的所有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-basis属性，这是flex属性中的第三个值。flex-basis设置伸缩项的初始大小。所以不是flex: 1 1 auto;，而是flex: 1 1 20%。

• 使用flex-grow属性(flex中的第一个值)。flex-grow告诉每个伸缩项应该消耗剩余空间的比例。下面是一个例子:

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