Flexbox：单列到堆叠多列

Question

我经常遇到这个布局问题：

小屏幕 - 项目堆叠在一行中，通常是图像后跟一些文本，然后是一个较小的子区域用于额外的杂项：

中等屏幕及以上 - 项目重新排列为 2 列，左侧为图像和其他内容，右侧为文本：

我觉得我应该可以用 flexbox 做到这一点，但我不知道怎么做。我知道我可以使用以下方式在列中排列项目：

.container {
    display: flex;
    flex-flow: column wrap;
}
.one,
.two,
.three {
    width: 50%;
}
.one {
    order: 1;
}
.two {
    order: 3;
}
.three {
    order: 2;
}

但问题是似乎没有办法在不设置固定高度的情况下将项目分成 2 列，这显然不能很好地响应响应。

有没有办法强制列在某些点断开？

Answer 1

你可以这样做。通过将宽度设置为移动尺寸的 100%。他们各自占线。

.container {
    width: 75%;
    margin: 0 auto;
}
.box1, .box2, .box3 {
    width: 50%;
}
.box1 {
    background-color: blue;
    float:left;
}
.box2 {
    background-color: green;
    float: right;
}
.box3 {
    background-color: purple;
    float: left;
}
@media screen and (max-width: 800px) {
    .box2 {
        float: left;
    }

    .box1,.box2,.box3 {
        width: 100%;
    }

}

JSFIDDLE

Flexbox：单列到堆叠多列

Flexbox: Single Column to Stacked Multi-Column

css

flexbox

responsive-design