Flexbox的栏布局响应与列重新排序没有固定的高度

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图用Flexbox的做到这一点=>Flexbox的栏布局响应与列重新排序没有固定的高度

桌面：

|   | | block 1 | 
| block 2 | 
|   | | block 3 |

移动：

block 1 
block 2 
block 3

我来到这个

.cont { 
    display: flex; 
    flex-direction: column; 
    flew-wrap: wrap-reverse; 
} 
.myblocks.block2 { 
    order: -1; 
} 
@media screen and (max-width: 640px) { 
    .cont { 
    display: block; 
    } 
}

个但这不起作用，直到我设定一个固定的height到.cont和flex-basis到.block1

问题：

  • 有与Flexbox的办法来做到这一点，没有固定的身高？

  • 是flexbox的正确工具吗？

注：我使用的是布尔玛

回答：

你可以做到这一点很容易与电网：

.grid {  
    display: grid;  
    grid-template-columns: 1fr 1fr; /* creates two columns, can also use 50% 50%, repeat(2, 1fr) or repeat(2, 50%), fr stands for fractions */  
}  
.item {  
    border: 1px solid;  
}  
.item:nth-child(2) {  
    grid-row: 1/3; /* spans two rows */  
}  
@media screen and (max-width: 640px) {  
    .grid {  
    grid-template-columns: 1fr; /* one column */  
    }  
    .item:nth-child(2) {  
    grid-row: initial; /* back to default */  
    }  
}

<div class="grid">  
    <div class="item">Block 1</div>  
    <div class="item">Block 2</div>  
    <div class="item">Block 3</div>  
</div>

哪一个， b以你的榜样为例，这是一个首选的方法。

以上是 Flexbox的栏布局响应与列重新排序没有固定的高度 的全部内容， 来源链接： utcz.com/qa/263230.html

回到顶部