我有三列,订购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;
}
}
第二列应移至下一行。
我该怎么做?
答案 0 :(得分:13)
默认情况下,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%;
}
}
以下是使用 列框 布局而不是 flex-box 的另一种解决方案,它确实非常有效