如何使用Flexbox在一行中的一行旁边对齐两个方框? [英] How can I use Flexbox to align two boxes in a column, next to a row?

问题描述

我想做的很特别，所以我画了一幅图来说明它:

What I would like to do is quite particular, so I've drawn a picture to illustrate it:

我可以轻松实现这一点:

I can easily implement this:

但是在此站点上看起来并不好，因为E元素比C或D高得多.

but it doesn't look good on this site because the E element is much taller than C or D.

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

What I would like, is for C and D to stack when the browser window is wide, but not when it's medium width.

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

I'm trying to implement this with CSS and Flexbox, and I've tried grouping together C and D in a div, but this creates problems at the medium layout.

推荐答案

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

Flexbox is 1D layout. Of course you can add some nesting, some fixed heights, but it's 1D and isn't perfect solution here.

在这里使用CSS网格布局要好得多，因为它是2D布局.

It's much much better to use CSS Grid Layout here, because it's 2D layout.

.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.演示:

If you need IE/Edge support you'll have to use outdated syntax and specify place for every row manually. IE/Edge implementation doesn't have grid cell auto-placement. So if you don't specify grid-column/grid-row for every cell they will all stack in very first cell. So for IE/Edge -ms-grid-row and -ms-grid-column default value is 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 .

If you want to test resizing here is jsFiddle.

这篇关于如何使用Flexbox在一行中的一行旁边对齐两个方框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！