Flexbox：单列到堆叠的多列

Posted 2023-03-07

【中文标题】Flexbox：单列到堆叠的多列

【英文标题】：Flexbox: Single Column to Stacked Multi-Column

【发布时间】：2015-07-11 21:09:30

【问题描述】：

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

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

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

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

.container 
    display: flex;
    flex-flow: column wrap;

.one,
.two,
.three 
    width: 50%;

.one 
    order: 1;

.two 
    order: 3;

.three 
    order: 2;

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

有没有办法强制柱子在某些点断裂？

【参考方案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

【讨论】：

抱歉，如果您在一秒钟前查看过...现在查看。