防止某些flex子元素之间换行

Question

我有一些使用 display: flex 的元素布局，像这样：

<div style="resize: horizontal; overflow: hidden; border: 10px solid black;">
  <div style="display: flex; flex-wrap: wrap;">
    <div style="flex: 0 0 100px; border: 10px solid #f77;">A</div>
    <div style="flex: 0 0 20px; border: 10px solid #373;">B</div>
    <div style="flex: 0 0 100px; border: 10px solid #f77;">C</div>
    <div style="flex: 0 0 20px; border: 10px solid #373;">D</div>
    <div style="flex: 0 0 100px; border: 10px solid #f77;">E</div>
    <div style="flex: 0 0 20px; border: 10px solid #373;">F</div>
  </div>
</div>

我曾使用flex-wrap: wrap在flex布局上使换行成为可能。但是我希望只有在需要时才在(B, C)和(D, E)之间进行换行，避免在(A, B)，(C, D)，(E, F)之间发生任何换行。

例如，当容器宽度为300px时，应该布局如下：

A B
C D
E F

但是不是

A B C
D E F

目前，当容器有一定的宽度时，可能会在 (B, C) 或 (D, E) 之间换行。如何避免这种情况？

- tsh

---

你会使用网格吗？那么你可以使用媒体查询来设置你想要的列数。 - undefined

@jons. 媒体查询可能有效，但在这个例子中，tsh已经使弹性容器可调整大小，而且很可能有其原因。 - undefined

Answer 1

将每对元素（A，B），（C，D），（E，F）视为单独的弹性项，以确保它们一起换行成为弹性行。或者使用网格布局来简化解决方案。

弹性盒子解决方案

每次调整弹性容器的大小时，弹性容器会尝试确定可以容纳多少个弹性项目到任何给定的行中。为此，将分别评估每个元素（A，B，C等）。这意味着一对中的一个元素可能适合于弹性线，而另一个元素则可能换行到下一行。

为了确保这些配对物品一起换行，您可以将每个配对物品包装到另一个元素中。这样，您的弹性容器不再将单独的元素视为弹性项（例如A，B，C，D等）。相反，它将把配对物品视为弹性项（AB，CD，EF）。然后，每个配对元素可以成为一个弹性容器本身，以确保内部元素水平布局。

<div style="resize: horizontal; overflow: hidden; border: 10px solid black">
  <div style="display: flex; flex-wrap: wrap">
    <div class="flex-item" style="flex: none; display: flex">
      <div style="width: 100px; border: 10px solid #f77">A</div>
      <div style="width: 20px; border: 10px solid #373">B</div>
    </div>
    <div class="flex-item" style="flex: none; display: flex">
      <div style="width: 100px; border: 10px solid #f77">C</div>
      <div style="width: 20px; border: 10px solid #373">D</div>
    </div>
    <div class="flex-item" style="flex: none; display: flex">
      <div style="width: 100px; border: 10px solid #f77">E</div>
      <div style="width: 20px; border: 10px solid #373">F</div>
    </div>
  </div>
</div>

网格解决方案

CSS网格布局可以让你在不添加额外HTML元素的情况下表达更复杂的布局。因此，你可以保留你的标记，并仅编辑样式。

在这种情况下，您想要表达尽可能多的元素对，如果一对无法适合，则应该进入新行。这样，元素将始终作为这些成对出现。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 120px 40px);
  resize: horizontal;
  overflow: hidden;
  border: 10px solid black;
}

.grid-item-big {
  border: 10px solid #f77;
}

.grid-item-small {
  border: 10px solid #373;
}

<div class="grid-container">
  <div class="grid-item-big">A</div>
  <div class="grid-item-small">B</div>
  <div class="grid-item-big">C</div>
  <div class="grid-item-small">D</div>
  <div class="grid-item-big">E</div>
  <div class="grid-item-small">F</div>
</div>

- Andy Jakubowski