html - 如何使用 Flexbox 将一列中的两个框对齐，紧挨着一行？

Question

我想做的事情比较有讲究，所以我画了一张图来说明一下:

我可以很容易地实现这个:

但在这个网站上看起来不太好，因为E元素比C或D高很多。

我希望 C 和 D 在浏览器窗口较宽时堆叠，但在中等宽度时不堆叠。

我正在尝试使用 CSS 和 Flexbox 来实现它，并且我已经尝试将 C 和 D 分组到一个 div 中，但这会在中型布局中产生问题。

Answer 1

Flexbox 是一维布局。当然你可以添加一些嵌套，一些固定的高度，但它是一维的，并不是完美的解决方案。

这里使用 CSS Grid 布局要好得多，因为它是 2D 布局。

.grid {
  display: grid;
}

/* just styles for demo */
.grid__item {
  font-size: 3em;
  padding: 20px;
  background-color: orange;
  color: white;
  margin: 10px;
  
  /* using flexbox for text centering */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* medium screen */
@media screen and (min-width: 700px) and (max-width: 999px) {
  .a {
    grid-column: 1 / span 2;
  }
}

/* wide screen */
@media screen and (min-width: 1000px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  .a {
    grid-column: 1 / span 2;
  }
  
  .d {
    grid-row: 3;
  }
  
  .e {
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
  }
}

<div class="grid">
  <div class="grid__item a">A</div>
  <div class="grid__item b">B</div>
  <div class="grid__item c">C</div>
  <div class="grid__item d">D</div>
  <div class="grid__item e">E</div>
</div>

如果您需要 IE/Edge 支持，您将不得不使用过时的语法并手动为每一行指定位置。 IE/Edge 实现没有网格单元格自动放置。因此，如果您不为每个单元格指定 grid-column/grid-row，它们将全部堆叠在第一个单元格中。所以对于 IE/Edge -ms-grid-row 和 -ms-grid-column 默认值为 1。Demo:

.grid {
  display: grid;
}

/* just styles for demo */
.grid__item {
  font-size: 3em;
  padding: 20px;
  background-color: orange;
  color: white;
  margin: 10px;
  
  /* using flexbox for text centering */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* medium screen */
@media screen and (min-width: 700px) and (max-width: 999px) {
  .grid {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr;
  }
  
  .a {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / span 2;
  }
  
  .b {
    -ms-grid-row: 2;
  }
  
  .c {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
  
  .d {
    -ms-grid-row: 3;
  }
  
  .e {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
  }
}

/* wide screen */
@media screen and (min-width: 1000px) {
  .grid {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  .a {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / span 2;
  }
  
  .b {
    -ms-grid-column: 3;
  }
  
  .c {
    -ms-grid-row: 2;
  }
  
  .d {
    -ms-grid-row: 3;
    grid-row: 3;
  }
  
  .e {
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2 / span 2;
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2 / span 2;
  }
}

<div class="grid">
  <div class="grid__item a">A</div>
  <div class="grid__item b">B</div>
  <div class="grid__item c">C</div>
  <div class="grid__item d">D</div>
  <div class="grid__item e">E</div>
</div>

如果你想在这里测试调整大小是jsFiddle .