gpt4 book ai didi

html - Flexbox 列,从下到上换行

转载 作者:太空宇宙 更新时间:2023-11-04 16:20:52 25 4
gpt4 key购买 nike

尝试构建一个 flexbox,其中元素的顺序不仅从底部开始,而且最后一个元素不断被插入。

排序方式与此类似:

[3][6]

[2][5]

[1][4]

目前,新的元素会出现在列的底部。

这甚至可以用 flexbox 来完成吗?

最佳答案

这确实可以用 flexbox 来完成。我们使用 flex-direction 属性,通过 flex-direction: column-reverse 来反转顺序,我们用 flex-wrap: wrap; 包裹盒子 - 这也可以通过在 flex-flow 中结合两者来完成 - 我在下面的笔中对此进行了注释。您需要注意的是,通过使用列化您的框,您需要为容器添加一个特定的高度。如果您不这样做,它们将继续向下,而不是环绕。

Here's a pen illustrating your exact need.

以及使用的代码:

HTML - 注意顺序。

<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>

CSS

.container {
display: flex;
flex-direction: column-reverse; /* Where ordering reverses */
flex-wrap: wrap; /* Wrapping boxes */
/* flex-flow: column-reverse wrap; */
height: 300px;
width: 100px;
}
.box { /* All properties here are for illustrative purposes */
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
width: 50px;
height: 50px;

background-color: red;
}

记住您的供应商前缀。

关于html - Flexbox 列,从下到上换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29405656/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com