gpt4 book ai didi

css - 以相反的顺序重新排列列

转载 作者:行者123 更新时间:2023-11-28 17:04:08 27 4
gpt4 key购买 nike

我有一个 flexbox 中的 flex 元素列表。元素的顺序很重要,为了可访问性,元素需要以正确的顺序显示在 dom 中。

[[itema][itemb][itemc]]

当 flexbox 缩小时,我希望元素以相反的顺序包装,例如意达先包装,等等。有没有办法让意达先包装?谢谢!

编辑:

这是代码

<div class="flex">
<div class="container">
<div class="item">item1</div>
<div class="item orange">item2</div>
<div class="item blue">item3</div>
</div>
<div class="last-item green">menu</div>
</div>

.flex {
display: flex;
background-color: yellow;
height: 80px;
overflow: hidden;
color: #fff;
}

.container {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
}

.item {
flex: 0 0 auto;
background-color: red;
height: 80px;
padding: 0 40px;
}

.last-item {
width: 40px;
flex: 0 0 auto;
height: 80px;
}

JSFiddle

除了我希望第一个元素先换行外,所有行为都符合要求。有任何想法吗?谢谢!

最佳答案

您可以使用 flex-direction: column-reverse 来获得您的解决方案。

@media (max-width: 768px) {
.flex-box {
display: flex;
flex-direction: column-reverse;
}
}
.first,
.second,
.third {
display: inline-block;
}
<div class="flex-box">
<div class="first">
<p>First Box</p>
<img src="http://placehold.it/300x300" />
</div>
<div class="second">
<p>Second Box</p>
<img src="http://placehold.it/300x300" />
</div>
<div class="third">
<p>Third Box</p>
<img src="http://placehold.it/300x300" />
</div>
</div>

JSfiddle Demo

关于css - 以相反的顺序重新排列列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30659716/

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