Question

我对flexbox的flex-wrap属性有疑问。

这是我的代码：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 50%;
  margin: 0 10px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
</div>

我想做的是在项目之间留出一些margin的空间，但不要包装它们。我希望将它们水平地两两分开放置，并包括每条宽度为50％的空白，以防止flex-wrap。

Answer 1

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 34%; /* fg, fs, fb */
  margin: 10px;
  height: 50px;
  background-color: gray;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

在flex-grow: 1速记中定义了flex的情况下，flex-basis（width）不必为50％，这导致每行一项边距。

由于flex-grow将占用该行的可用空间，因此flex-basis仅需要足够大即可实施换行。

在这种情况下，使用flex-basis: 34%时，页边距有足够的空间，但每行中的第三项没有足够的空间。

Answer 2

您可以使用calc从宽度中排除边距：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: calc(50% - 20px);
  margin: 5px 10px;
  height:20px;
  background:red;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 3

您可以为此使用calc，例如，可以设置flex-basis: calc(50% - margin x 2)。

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-basis: calc(50% - 20px);
  margin: 10px;
  background: lightblue;
  height: 50px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

边距和弹性包装中的弹性包装

3 个答案: