基于 (flex) 项目内容的 CSS 布局

Question

我已经编写了一些 JavaScript 来实现这一点，但它的性能降低了我的组件速度并且它不干净，所以我正在努力寻找更有效的 CSS 解决方案来优化它。我已经在网上搜索过，没有任何效果。

所以基本上我们有这个模板（简化）：

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

所有 3 个.box 都占用 1/3（即calc(100% / 3)）并连续渲染。

如果至少有一个box 的内容溢出它的专用空间- 所有3 个都假设在列中呈现（即flex-direction: column）。有没有什么方法可以使用flexboxes 而不使用 JavaScript 来实现这一点？

注意：这个块是在一个响应式组件（下拉菜单）中呈现的，即 100% 的网格单元。它可能会占用 100% 的屏幕以及 10% 的屏幕。所以我不能在这里使用任何媒体查询。

Answer 1

如果要包裹最后一项，可以在 flexbox 容器中使用 flex-wrap:wrap;，如果 flex 项没有特定宽度，则可以使用 min-width。

如果你想在一个断点改变弹性盒子的方向，你可以像这样使用@media：

@media screen and (max-width:680px){
    .flexContainer{
        flex-direction:column;
    }
}