使用 flex 重新排列布局

Question

我有以下 html。

<div id="wrapper">
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
</div>

使用 css flex，我在桌面模式下有以下布局：

++++++++++++++++++++++++++++++++++++++++++
+            +             +             +
+     A      +      B      +      C      +
+            +             +             +
++++++++++++++++++++++++++++++++++++++++++

我想重新排列 div，使其在移动模式下看起来像：

++++++++++++++++++++++++++++++++++++++++++
+                                        +
+                   B                    +
+                                        +
++++++++++++++++++++++++++++++++++++++++++
+                   +                    +
+        A          +          C         +
+                   +                    +
++++++++++++++++++++++++++++++++++++++++++

flex 技巧可以吗？

Answer 1

是的，你当然可以使用 flexbox 来做这个布局。

下面的 CSS 可能会对你有所帮助。

#wrapper{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}
#wrapper>div{
  border:1px solid #ccc;
  padding:15px;
  -webkit-box-flex:1;
  -ms-flex:1;flex:1;
  text-align:center;
}

@media(max-width:767px) {
  #wrapper>#b{
    min-width:100%;
    -webkit-box-ordinal-group:0;
    -ms-flex-order:-1;
    order:-1;
  }
}

<div id="wrapper">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
</div>

Answer 2

您可以使用flex order 实现此目的

#wrapper {
  display: flex;
  align-items: center;  
  flex-wrap: wrap;
}

#a, #b,#c{
  flex: 0 0 33.33%;
  text-align:center;
  min-height: 100px;
}
#a{
  background: red;
}
#c {
  background: blue;
}

@media (max-width:767px){
  #a {
    order: 2;
    flex: 0 0 50%;
  }
  #b {
    order: 1;
    flex: 0 0 100%;
  }
  #c {
    order: 3;
    flex: 0 0 50%;
  }
}

<div id="wrapper">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
</div>