时间戳

首页 > 解决方案 > 防止某些 flex 子元素之间的换行

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

问题描述

我有一些使用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）之间进行包裹。我怎样才能避免这种情况？

标签： htmlcssflexbox

解决方案

将每一对元素——(A,B)、(C,D)、(E,F)——视为一个单独的弹性项目，以确保它们一起包裹到弹性线中。或者使用网格布局以获得更简单的解决方案。

弹性盒解决方案

每次调整 flex 容器的大小时，flex 容器都会尝试计算出任何给定行可以容纳多少 flex 项。为此目的，每个元素（A、B、C 等）都被单独评估，这意味着一对元素中的一个元素可能适合柔性行，而另一个元素可能会换行到下一行。

为了确保这些对包裹在一起，您可以将每一对包裹到另一个元素中。这样，您的 flex 容器不再将单个元素视为 flex 项（A、B、C、D 等）。相反，它会将对视为弹性项目（AB、CD、EF）。然后每个 pair 元素都可以是一个 flex 容器本身，以确保里面的元素是水平布局的。

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

推荐阅读