在同一容器中对齐具有不同高度的flex项目 [英] Align flex items with different heights in the same container
本文介绍了在同一容器中对齐具有不同高度的flex项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道是否可以让flex项目在同一个容器中水平对齐到更大的flex项目。使用CSS浮动,这将是很容易完成,但我还没有能够完成与flex项目。
I wonder if it's possible to get flex items horizontally aligned to larger flex items in the same container. Using CSS floats it would be easily accomplished, but I haven't been able to get it done with flex items.
网格布局
<div class="flex-container">
<div class="large-flex-item">
</div>
<div class="small-flex-item">
</div>
<div class="small-flex-item">
</div>
</div>
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
max-width: 500px;
margin-right: auto;
margin-left: auto;
}
.small-flex-item {
flex-basis: 33.333%;
background: #000;
padding-top: 30%;
}
.large-flex-item {
flex-basis: 66.667%;
background: #333;
padding-top: 60%;
}
推荐答案
嵌套flex容器。
HTML
<div class="flex-container">
<div class="large-flex-item"></div><!-- flex item #1 -->
<div class="flex-container-inner"><!-- flex item #2 & nested flex container -->
<div class="small-flex-item"></div><!-- this flex item and sibling will align... -->
<div class="small-flex-item"></div><!-- ... in column next to .large-flex-item -->
</div>
</div>
CSS
.flex-container {
display: flex;
width: 500px;
margin-right: auto;
margin-left: auto;
}
.large-flex-item {
flex-basis: 66.667%;
height: 200px;
background: #333;
}
.flex-container-inner {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.small-flex-item {
flex-basis: 100%;
height: 100px;
background: #000;
}
这篇关于在同一容器中对齐具有不同高度的flex项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文