时间戳

首页 > 解决方案 > 将换行限制为 n 行

css - 将换行限制为 n 行

问题描述

我正在尝试以一种方式在“容器”（父 div）中安排“项目”（子 div）

这就是我要的：

┌───┐┌─────────┐┌─────┐
│ █ ││ █ █ █ █ ││ █ █ │
│ █ ││ █ █ █   ││ █ █ │
└───┘└─────────┘└─────┘

与此相反，每行的项目数是固定的，但行数是灵活的。
我的尝试是制作容器和它们的父容器display:flex，给容器一个固定的高度，只允许两行，并给容器一个高flex-shrink值，所以它们会尽量变窄并让它们的子项包裹起来。但是物品不是这样包装的，相反，我明白了

.wrapper {
  display:flex;
  flex-wrap:wrap;
  font-size:2vw;
  width:96vw;
}
.container {
  flex:0 20 auto;
  display:flex;
  flex-wrap:wrap;
  height:20vw; 
  margin:1vw;
  background:skyblue;
}
.item {
  position:relative; 
  width:10vw;
  height:7vw;
  margin:1vw;
  background:orange;
}
<div class="wrapper">
  <div class="container">
    <div class="item">1a</div>
    <div class="item">1b</div>
  </div>
  <div class="container">
    <div class="item">2a</div>
    <div class="item">2b</div>
    <div class="item">2c</div>
    <div class="item">2d</div>
    <div class="item">2e</div>
    <div class="item">2f</div>
    <div class="item">2g</div>
  </div>
  <div class="container">
    <div class="item">3a</div>
    <div class="item">3b</div>
    <div class="item">3c</div>
    <div class="item">3d</div>
  </div>
</div>

┌─────┐
│ █ █ │
│     │
└─────┘
┌───────────────┐
│ █ █ █ █ █ █ █ │
│               │
└───────────────┘
┌─────────┐
│ █ █ █ █ │
│         │
└─────────┘

物品不会有任何包装的冲动，而是会拉伸容器，使它们变得太宽而无法包装，大多数情况下会占据一整排。
是的，我可以在后端的帮助下暴力破解两行，但这感觉不对：o[。
（条件：定义了项目的高度和宽度。每个容器的项目数是可变的，但受到限制，以便每个容器都适合页面。）

有什么好主意吗？非常感激！谢谢。

标签： cssflexbox

解决方案

正如您所说，您将需要一些后端帮助。如果您能够向每个容器添加元素的数量，那么您可以像下面这样：

.wrapper {
  display:flex;
  flex-wrap:wrap;
  font-size:2vw;
  width:96vw;
}
.container {
  flex-basis:calc(12vw*var(--n)/2); /* 12 = width + 2*margin */
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  height:20vw; 
  margin:1vw;
  background:skyblue;
}
.item {
  position:relative; 
  width:10vw;
  height:7vw;
  margin:1vw;
  background:orange;
}
<div class="wrapper">
  <div class="container" style="--n:2">
    <div class="item">1a</div>
    <div class="item">1b</div>
  </div> 
  <div class="container"  style="--n:8"> <!-- we round to the biggest even number --> 
    <div class="item">2a</div>
    <div class="item">2b</div>
    <div class="item">2c</div>
    <div class="item">2d</div>
    <div class="item">2e</div>
    <div class="item">2f</div>
    <div class="item">2g</div>
  </div>
  <div class="container"  style="--n:4">
    <div class="item">3a</div>
    <div class="item">3b</div>
    <div class="item">3c</div>
    <div class="item">3d</div>
  </div>
</div>

推荐阅读