如何使用Flexbox将行中的两个框对齐？

Question

我想什么做的是非常具体的，所以我画一张图片来说明吧：

我可以很容易地实现这一点：

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

我想要的是C和D在浏览器窗口很宽，但不是中等宽度时。

我试图用CSS和Flexbox实现这一点，并且我试过将C和D分组在一起，但是这会在中等布局中产生问题。

Answer 1

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

这里使用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 /边缘-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。

Answer 2

demo

变化，你需要的

.box { 
 
    background-color: green; 
 
    margin: 5px; 
 
    /* padding: 30px; */ 
 
} 
 

 
.one { 
 
    display: flex; 
 

 
} 
 

 
.a { 
 
    flex: 3; 
 
} 
 

 
.b { 
 
    flex: 2; 
 
} 
 

 
.two { 
 
    display: flex; 
 
    
 
} 
 

 
.three { 
 
    flex: 2; 
 
} 
 

 
.four { 
 
    flex: 3; 
 
}

<div class="main"> 
 
    <div class="one"> 
 
     <div class="a box">a</div> 
 
     <div class="b box">b</div> 
 
    </div> 
 
    <div class="two"> 
 
     <div class="three"> 
 
      <div class="c box">c</div> 
 
      <div class="d box">d</div> 
 
     </div> 
 
     <div class="four box"> 
 
      <div class="e">e</div> 
 
     </div> 
 
    </div> 
 

 
</div>