我在 3x2 網格中有 6 個單元格。
我有以下 html
.wrapper {
margin: 2px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
border:1px solid #000;/* only for showing here */
min-height:20px;/* only for showing here */
}<div class='wrapper'>
<div class='row'>
<div class='column'>
<div class='1'>
</div>
</div>
<div class='column'>
<div class='2'>
</div>
</div>
<div class='column'>
<div class='3'>
</div>
</div>
</div>
<div class='row'>
<div class='column'>
<div class='4'>
</div>
</div>
<div class='column'>
<div class='5'>
</div>
</div>
<div class='column'>
<div class='6'>
</div>
</div>
</div>
</div>這將創建一個 3x2 網格。
但是，我想要的是在較小的螢屏上，結束列位于前 2 列之下。然后我所做的是創建 1 列，寬度為 66.6%，另一列寬度為 33.3%。在第一列中創建了 2 行，每行中都有另一列。并在第二列中創建了 2 行，每行 1 列。
現在我有一個 3x2 網格，它在移動設備上將結束列放在前 2 列之后。然而，前兩列 (66.6%) 中的列是相等的，但第三列 (33.3%) 與第一列的高度不同，因為它們現在是單獨的列。
如何使最后一列中的 div 與第一個中的 div 高度相同？謝謝
編輯已添加影像作為示例
例子
uj5u.com熱心網友回復：
您有 6 個單元格，對于移動視圖，您可以使用order屬性。
.wrapper {
display: flex;
flex-wrap: wrap;
}
.wrapper> div {
border:1px solid #000;/* only for showing here */
min-height:20px;/* only for showing here */
}
@media all and (min-width: 401px) {
.wrapper> div {
width: 33%;
}
}
@media all and (max-width: 400px) {
.wrapper> div {
width: 100%;
}
.cell1 {
order: 0;
}
.cell2 {
order: 1;
}
.cell3 {
order: 4;
}
.cell4 {
order: 2;
}
.cell5 {
order: 3;
}
.cell6 {
order: 5;
}
}<div class='wrapper'>
<div class='cell1'>1</div>
<div class='cell2'>2</div>
<div class='cell3'>3</div>
<div class='cell4'>4</div>
<div class='cell5'>5</div>
<div class='cell6'>6</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/328520.html