Flexbox订购。拆分列

Question

我希望实现以下功能，使用Flexbox更改移动/桌面的页面布局。

我正在尝试使用Flexbox订购来实现以下目标：

http://i.stack.imgur.com/iBXpJ.jpg

希望这有道理吗？

Answer 1

以下是使用flexbox执行此操作的方法。的 Here is the working demo.

<div class="main-container">
  <div class="item menu">Menu</div>
  <div class="item sidebar">Sidebar</div>
  <div class="item content">Content</div>
</div>

.main-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.item {
  border: 5px solid gray;
}

.menu {
  flex-basis: 200px;
  width: 200px;
}

.sidebar {
  flex-grow: 1;
  width: 200px;
}

.content {
  flex-basis: 100%;
  width: calc(100% - 200px);
}

@media (max-width: 600px) {
  .main-container {
    flex-wrap: no-wrap;
    height: 100%;
  }

  .item {
    width: 100%;
  }

  .sidebar, .content {
    flex-basis: auto;
  }
}