时间戳

首页 > 解决方案 > 弹性盒项目如何使用其父项的全宽

html - 弹性盒项目如何使用其父项的全宽

问题描述

.container {
  width: 400px;
  border: 2px solid red;
  display: flex;
  flex-flow: row wrap;
}

.item {
  padding: 20px;
  border: 1px solid blue;
  width: 70px;
}
<div class="container">
  <div class=item>Box 1</div>
  <div class=item>Box 2</div>
  <div class=item>Box 3</div>
  <div class=item>Box 4</div>
  <div class=item>Box 5</div>
</div>

我的问题是，“Box 1”、“Box 2”、“Box 3”如何使用“容器”类的全宽？而“Box 4”和“Box 5”将从下方排列到上面的“Box 1”和“Box 2”。

标签： htmlcssflexbox

解决方案

你有几种方法可以解决它；这里有两种方法：

使用flex-grow. 如果添加flex-grow: 1到item选择器，则每行上的框将占据容器的整个宽度。注意：使用此解决方案，您可能希望确保每行具有相同数量的框，如果您希望这些框显示为统一网格。否则只有一两个框的线将被拉伸以填充容器的宽度。所以记住这一点。

.container {
  width: 400px;
  border: 2px solid red;
  display: flex;
  flex-flow: row wrap;
}

.item {
  padding: 20px;
  border: 1px solid blue;
  width: 70px;
  flex-grow: 1;
}

第二个选项：添加margin: 0 auto;到item选择器，它们将通过居中填充宽度。

.container {
  width: 400px;
  border: 2px solid red;
  display: flex;
  flex-flow: row wrap;
}

.item {
  padding: 20px;
  border: 1px solid blue;
  width: 70px;
  margin: 0 auto;
}

推荐阅读