Html 在弹性框布局中的第n个元素后强制换行

.container {
  display: flex;
  flex-wrap: wrap;
}

.child-33 {
  height: 50px;
  border: 2px solid;
  width: 33%;
  box-sizing: border-box;
}

.child-50 {
  height: 50px;
  border: 2px solid;
  width: 50%;
  box-sizing: border-box;
}

<div class="container">
  <div class="child-33">1. Row</div>
  <div class="child-33">2. Row</div>
  <div class="child-33">2. Row</div>
  <div class="child-33">2. Row</div>
  <div class="child-50">3. Row</div>
  <div class="child-50">4. Row</div>
  <div class="child-50">4. Row</div>
</div>

.container {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}
.container * {
  box-sizing: inherit;
}

.cell {
  flex: none;
  display: flex;
  justify-content: stretch;
}

.content {
  flex: auto;
  margin: 2px;
  min-height: 20px;
  padding: 4px;
  border: 2px outset #ccc8;
  border-radius: 4px;
}

.c-2 {
  width: 33.33%;
}
.c-3 {
  width: 50%;
}
.c-6 {
  width: 100%;
}

<div class="container">
  <div class="cell c-2"><div class="content">1. Row</div></div>
  <div class="cell c-2"></div>
  <div class="cell c-2"></div>
  <div class="cell c-2"><div class="content">2. Row<br>...<br>...</div></div>
  <div class="cell c-2"><div class="content">2. Row</div></div>
  <div class="cell c-6"><div class="content">3. Row</div></div>
  <div class="cell c-3"><div class="content">4. Row</div></div>
  <div class="cell c-3"><div class="content">4. Row</div></div>
</div>

Html相关问答推荐

使用tauri构建的Next.js应用程序不显示我的404页面

有没有可能一个按钮，有焦点，然后再次点击它清除它的焦点，只是使用css？

选中/取消选中带有_hyperscript的多个复选框

如何使用CSS在NSAttributedString中为HTML文本中的图像制作覆盖图

如何保持嵌套进度条的背景色？

在TWebLabel标题中设置换行符/换行符的方法？

如何在ASP.NET Core中添加换行符

`table>；的消失；tbody：nth子级(1)`HTML

如何在悬停时更改同级元素 CSS

MUI 日期 Select 器要包含的日期

添加带有悬停动画的喜欢图标

当多个a元素用作目标时的：target伪类

是否可以制作响应式 CSS 剪辑路径？

为什么当我按第三个按钮时，前两个按钮会跳动？

图像如何能达到 HTML 表格的全宽？

带圆角帽的 CSS 部分边框

右对齐 bootstrap 导航项而不是下拉菜单

我正在使用 react-router-dom 并创建了一个固定的导航栏，它在每个网页上不断改变大小，我不知道为什么

为什么浏览器在 Select 一个包裹在 标签中的块级元素后包含相邻元素？

尽管设置了 width：100% left：0，但居中对齐的 CSS 动画并不对称