我正在嘗試找出如何對齊我的彈性盒項目。我不確定這是否可能，所以我才問。這是我的代碼：我的CSS：.container {width: 100%; display: flex; position: relative;}.item {display: flex;}.one {width: 65%;}.two {width: 35%;}和html：<div class="container><div class="item one"></div><div class="item one"></div><div class="item one"></div><div class="item two"></div><div class="item two"></div></div>我想讓它像這樣：
1 回答
慕森王
TA貢獻(xiàn)1777條經(jīng)驗 獲得超3個贊
你想要flex-direction: column和flex-wrap:wrap。然后給你的物品高度，以便它們垂直包裹在容器內(nèi)：
html,body{height:100%;}
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
border: solid 2px orangered;
width: 50%;
height: 60%;
box-sizing:border-box;
}
.item {
box-sizing:border-box;
margin: 2px;
}
.one {
height: calc(33% - 4px);
border: solid 2px green;
width: calc(65% - 4px);
}
.two {
height: 40%;
border: solid 2px orange;
width: calc(35% - 4px);
}
<div class="container">
<div class=" item one ">one</div>
<div class="item one ">one</div>
<div class="item one ">one</div>
<div class="item two ">two</div>
<div class="item two ">two</div>
</div>
- 1 回答
- 0 關(guān)注
- 221 瀏覽
添加回答
舉報
0/150
提交
取消