flex-flow:按相反顺序反转html和css的行反转包装
flex-flow:按相反顺序反转html和css的行反转包装
提问于 2018-05-28 16:17:08
我有一个内容，我希望他们在行反转和包装反转，但顺序颠倒。代码如下：
.a {
height: 200px;
width: 520px;
padding: 5px 5px 5px 10px;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
background-color: black;
}
.b {
min-width: 120px;
height: 90px;
text-align: center;
line-height: 90px;
margin-right: 5px;
background-color: aquamarine;
}<div class="a">
<div class="b">1</div>
<div class="b">2</div>
<div class="b">3</div>
<div class="b">4</div>
<div class="b">5</div>
<div class="b">6</div>
</div>
顺序应该颠倒。请不使用“order”属性回答此问题。类似于下面的图片(很抱歉有错误的编辑)：
请先看代码输出，再看图片。
回答 1
Stack Overflow用户
发布于 2018-05-28 19:46:04
一种可能的方法是使用JS来计算第一个元素应该在左边的边距，方法是使用模数，如下面的代码片段所示。
const offset = document.querySelectorAll('.a .b').length%4;
const width = 120 + 5; //min-height + margin, it's probably better to calculate this value.
document.querySelector('.a .b').style.marginLeft = `${width*offset}px`;.a {
height: 200px;
width: 520px;
padding: 5px 5px 5px 10px;
display: flex;
flex-wrap: wrap;
background-color: black;
}
.b {
min-width: 120px;
height: 90px;
text-align: center;
line-height: 90px;
margin-right: 5px;
background-color: aquamarine;
}<div class="a">
<div class="b">1</div>
<div class="b">2</div>
<div class="b">3</div>
<div class="b">4</div>
<div class="b">5</div>
<div class="b">6</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50561924
复制相关文章
相似问题