我有4个格,我使用Flexbox的对齐。在桌面大小,存在与占用在容器的整个高度的第一和最后的div 3名相等的宽度的列。在第二和第三的div与每个占用高度的50%的中间垂直堆叠。这是工作的罚款。
在手机大小,我希望最后一个div是在顶部和伸展容器的整个宽度。然后,我要左对齐顶格下方的第一个div和占用宽度的50%和容器的剩余高度。
时遇到的问题是我想要的第二和第三div来右对齐顶下股利,并采取了宽度的剩余的50%,但可以垂直堆叠,以便每个占用剩余的高度的50%。
我试着改变媒体查询和其他一切我能想到的flex-direction
,但它不工作。
* {
margin: 0;
padding: 0;
}
.box-wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 70vh;
align-items
}
.boxa {
background: red;
flex: 0 0 100%;
width: 33%;
}
.boxb {
background: orange;
}
.boxc {
background: lightgreen;
}
.boxb,
.boxc {
flex: 0 0 50%;
width: 33%;
}
.boxd {
background: grey;
flex: 0 0 100%;
width: 33%;
}
@media (max-width: 700px) {
.boxa {
order: 2;
width: 50%;
flex: 0 0 75%;
}
.boxb {
order: 3;
width: 50%;
flex: 0 0 37.5%;
}
.boxc {
order: 4;
width: 50%;
flex: 0 0 37.5%;
}
.boxd {
order: 1;
flex: 0 0 25%;
width: 100%;
}
}
<div class="box-wrapper">
<div class="boxa"></div>
<div class="boxb"></div>
<div class="boxc"></div>
<div class="boxd"></div>
</div>
你想要的布局很难用Flexbox的实现,因为Flexbox,就不能很好地适合于2维网格。它擅长一维网格(放置在行或列柔性物品),但已在2维网格(放置柔性物品以行和列)的能力有限。
作为您所需的布局涉及必须跨越的行和列线项目,flex是不是你最好的选择。使用CSS格,你的布局是简单和容易。
.box-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal width columns */
grid-template-rows: 1fr 1fr; /* 2 equal height rows */
height: 70vh;
grid-column-gap: 5px;
grid-row-gap: 5px;
padding: 5px;
grid-template-areas: " first second last "
" first third last ";
}
.boxa { grid-area: first; background: red; }
.boxb { grid-area: second; background: orange; }
.boxc { grid-area: third; background: lightgreen; }
.boxd { grid-area: last; background: grey; }
@media ( max-width: 700px) {
.box-wrapper {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: " last last "
" first second "
" first third ";
}
}
* { margin: 0; padding: 0; }
/* for placing and styling numbers only */
.box-wrapper > div {
font-size: 1.5em; display: flex; align-items: center; justify-content: center; }
<div class="box-wrapper">
<div class="boxa">1</div>
<div class="boxb">2</div>
<div class="boxc">3</div>
<div class="boxd">4</div>
</div>
更多信息: