我有三列,分别订购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-directionrow,您应该将其更改为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/

10-09 06:13
查看更多