使用 Flexbox 布局 css

Question

正在设计布局，但无法弄清楚！我正在使用 flexbox，这对我来说是全新的。

这就是我想要实现的目标。（就像是）

在较小的宽度上是这样的

到目前为止我在代码中的内容 Html

    <div id="content">
      <section id="profile">

      </section>
      <section id="chat">

      </section>
      <section id="questions">

      </section>
    </div>

Scss

#content {
 display: flex;
 flex-flow: wrap row;
 height: 100%;
}
#content > section {
  flex: 1 100%;
}
#profile {
  background: tomato;
  max-width: 60%;
}
#chat {
  background: deepskyblue;
  max-width: 60%;
}
#questions {
  background: yellowgreen;
}

结果

差得远（我知道，max-width: 60%）。卡在这里，已经尝试了很多东西，而 atm，我只是在尝试一些不再有意义的东西。

搜索了很多但找不到！我在考虑 flexbox wrapper/container 里面的 flexbox container/wrapper (?)，不确定这是否可能。

希望有人能指导我解决这个问题，感谢您阅读本文。

此致

Answer 1

我为两个垂直部分添加了 .wrap div，它具有 display:flex 并且方向设置为 column。对于排序，我使用了直截了当的 order 属性.

EXAMPLE

HTML:

   <div id="content">


      <section id="profile"> 
          Profile
      </section>

    <div class="wrap">
      <section id="chat">
          Chat
      </section>

      <section id="questions">
        Questions
      </section>
     </div>
   </div>

CSS:

#content {
 display: flex;
 flex-flow: row wrap;
 height: 100%;
  text-align: center;
}
section {
  min-height: 200px;
}

#profile {
  background: tomato;
  width: 40%;
  order:3;
}
#chat {
  background: deepskyblue;
  order:2;
  width: 100%;
}
#questions {
  order:1;
  width: 100%;
  background: yellowgreen;
}

.wrap {
  display:flex;
  flex-flow:column nowrap;
  width: 60%;
}

@media (max-width:700px) {
  #content {
    flex-flow:column nowrap;
  }

  .wrap {
    width: 100%;
  }

  #profile {
    width: 100%;
  }
}

使用 Flexbox 布局 css

Layout using Flexbox css

css

flexbox

mobile-website