css - 特殊的 flexbox 布局

Question

我正在尝试完成以下布局:

我首先想到的是使用flexbox来实现这种布局。我目前有以下 HTML:

<section>
   <div class"item">box1</div>
   <div class"item">box2</div>
   <div class"item">box3</div>
   <div class"item">box4</div>
   <div class"item">box5</div>
</section>

如何使用 HTML 实现所需的布局？我也可以像这样在元素之间添加换行 div 元素:

<div class"break"> </div>

不幸的是，我仍然无法实现所需的布局。请帮忙

Answer 1

一个简单的基于 CSS 网格的方法是使用“template of named grid areas”。

CSS 网格允许命名区域，它根据这些网格子项的 grid-area 指示子项的放置。根据您的要求，基于命名区域的模板可以定义为:

grid-template-areas: 
"a a b b c c" 
". . e f . .";

这些模板区域的工作原理是:

• 具有a、b和c的grid-area的子元素占据顶行模板布局，其中每个跨越 6 列网格中的两列
• 具有e和f的grid-area的子元素占据模板的底行，分别在第三和第四列.此行配置中的 . 指定没有子苹果到模板的该区域

请注意，模板区域字符串可以写在 grid-template-areas 属性的同一行，如下所示:

section {
  /* Specify that CSS grid is to be used for layout of children */
  display: grid;
  /* Specify spacing between children */
  grid-gap:1rem;
  /* Wrap against six evenly spaced columns of this grid */
  grid-template-columns: repeat(6, 1fr);
  /* Define the area names of the grid template */
  grid-template-areas: "a a b b c c" ". . e f . .";
}

section div:nth-child(1) {
  grid-area: a;
}

section div:nth-child(2) {
  grid-area: b;
}

section div:nth-child(3) {
  grid-area: e;
}

section div:nth-child(4) {
  grid-area: f;
}

section div:nth-child(5) {
  grid-area: c;
}

/* Optional aesthetics to better match your example */
div {
  background: darkgrey;
  border-radius: 5px;
  color: white;
  text-align: center;
}

<section>
  <div class "item">box1</div>
  <div class "item">box2</div>
  <div class "item">box3</div>
  <div class "item">box4</div>
  <div class "item">box5</div>
</section>

更新

section {
  display: grid;
  grid-gap:1rem;
  grid-template-columns: repeat(5, auto);
  grid-template-areas: "a b c c d e" ". . f g . .";
}

section div:nth-child(1) {
  grid-area: a;
}

section div:nth-child(2) {
  grid-area: b;
}

section div:nth-child(3) {
  grid-area: c;
}

section div:nth-child(4) {
  grid-area: f;
}

section div:nth-child(5) {
  grid-area: g;
}

section div:nth-child(6) {
  grid-area: d;
}

section div:nth-child(7) {
  grid-area: e;
}

/* Optional aesthetics to better match your example */
div {
  background: darkgrey;
  border-radius: 5px;
  color: white;
  text-align: center;
}

<section>
  <div class "item">box1</div>
  <div class "item">box2</div>
  <div class "item">box3</div>
  <div class "item">box4 lots of content causes uneven column distribution</div>
  <div class "item">box5</div>
  <div class "item">box6</div>
  <div class "item">box7</div>
</section>