使用 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

您可以使用 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>

Answer 2

是的，您当然可以使用 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>

使用 flex 重新排列布局

Rearrange layout with flex

css

flexbox

responsive-design