html - 如何使用Flexbox在一行中的一行旁边对齐两个方框？

我想做的很特别，所以我画了一张图来说明：



我可以轻松实现：



但此网站上的效果不好，因为E元素比C或D高得多。

我想让C和D在浏览器窗口宽时堆叠，而在中等宽度时不堆叠。

我正在尝试使用CSS和Flexbox来实现这一点，并且尝试在div中将C和D分组在一起，但这会在中等布局上产生问题。

最佳答案

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

在这里使用CSS Grid Layout更好，因为它是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。演示：

.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。