我有三列,分别订购1,2,3。
HTML
<div class="flex-container">
<div class="item first">1</div>
<div class="item second">2</div>
<div class="item third">3</div>
</div>
CSS
.flex-container {
display: flex;
}
.item {
background: orange;
padding: 10px auto;
color: #fff;
font-family: arial;
flex-grow: 100;
flex-shrink: 50;
text-align: center;
}
.first {
order: 1;
}
.second {
order: 2;
}
.third {
order: 3;
}
切换到移动屏幕列时我想要的内容应显示为:
1 3
2
媒体查询
/* Too narrow to support three columns */
@media all and (max-width: 640px) {
.second {
order: 3;
/* And go to second line */
}
.third {
order: 2;
}
}
第二列应移至下一行。
Fiddle
我怎样才能做到这一点?
最佳答案
默认情况下,flex-direction
是row
,您应该将其更改为column
并使用flex-wrap:wrap
(我们可以很快使用flex-flow:column wrap
编写它)。请注意,要使第三列跳到下一列,.flex-container
的高度应足够大以包含所有.first
和.second
,但不足以包含所有3个项目。这样,您就可以知道.third
扩展/压缩了整个空间(在第二列上)。因此,您可以尝试设置其flex-grow:0
并使用flex-basis:50%
。这是代码:
@media all and (max-width: 640px) {
.flex-container {
flex-flow:column wrap;
height:40px;
}
.third {
flex-grow:0;
flex-basis:50%;
}
}
Demo.
这是另一种使用列框布局而不是 flex-box 布局的解决方案,它确实非常好用。
Demo 2
关于html - 使用Flex Box将列移至下一行,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23863680/