html - 使用 Flex Box 将列移动到下一行

Question

我有三列，顺序为 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

我该怎么做？

Answer 1

默认flex-direction是row，你应该把它改成column并使用flex-wrap:wrap(我们可以使用 flex-flow:column wrap 很快地编写它)。请注意，要使第三列跳转到下一列，.flex-container 的高度应足够大以包含所有 .first 和 。 second 但不足以包含所有 3 个元素。这样，您就可以认识到 .third 扩展/拉伸(stretch)了整个空间(在第二列)。所以你可以尝试设置它的 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.

这是另一个使用 column box 布局而不是 flex-box 的解决方案，它确实工作得很好.

Demo 2