Flex行5个div，一个具有静态宽度，另外四个具有百分比-Java 学习之路

我有一排有5列 . 第一列是我希望保持150px恒定宽度的轮廓图 . 其他四个有各种输入/按钮，我希望它们每个都是基于百分比，并且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这样的东西，但却无法弄清楚如何让它成为jive .

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

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项目应用唯一宽度（代码中的宽度百分比不同），可以使用以下两个选项：

使用flex-basis属性，这是flex属性中的第三个值 . flex-basis 设置弹性项的初始大小 . 所以你可以说 flex: 1 1 20% 而不是 flex: 1 1 auto; .
使用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/

回复于 2024-04-28T05:54:49+08:00

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

1 回答

相关问题