Flexbox 布局查询，行到列答案

【问题标题】：Flexbox Layout Query, Rows to ColumnsFlexbox 布局查询，行到列
【发布时间】：2016-04-28 05:58:56
【问题描述】：

我正在尝试从此（移动设备）实现基于 flexbox 的过渡：

至此（桌面）：

但是我很难垂直堆叠两个侧面板，我自己的代码在一行中生成主面板、搜索面板和其他面板。为简洁起见，我没有插入 webkit 代码。

代码：

p {
  padding: 10px;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.header {
  flex: 1 0 100%;
  background-color: pink;
}

.search {
  flex: 1 100%;
  background-color: yellow;
}

.main {
  flex: 1 100%;
  background-color: lightblue;
}

.other {
  flex: 1;
  background-color: Red;
}

@media (min-width: 600px) {
  .flex-container {} .search {
    flex: 1 0;
    order: 2
  }
  .main {
    flex: 3 0;
    order: 1;
  }
  .other {
    flex: 1 0;
    order: 3
  }
}

<div class="flex-container">
  <div class="header">
    <p>header</p>
  </div>
  <div class="search">
    <p>search</p>
  </div>
  <div class="main">
    <p>main</p>
  </div>
  <div class="other">
    <p>other</p>
  </div>
</div>

jsFiddle：https://jsfiddle.net/azizn/d2pmdvc4/

【问题讨论】：

ttp://stackoverflow.com/help/how-to-ask
一张图片胜过千言万语。还提供您目前拥有的代码。
欢迎来到 Stack Overflow！预计您至少会尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些额外的研究，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。
stackoverflow.com/help/on-topic

标签： html css flexbox

【解决方案1】：

这里的问题是，如果你的主要元素（#main、#search 和#other）是兄弟元素，那么你不能用 Flexbox 真正做到这一点，除非你知道 #search 的固定高度值（hacky 解决方案position: absolute):

#header, .flex div {
  padding: 1em;
  box-sizing: border-box;
  border: 1px solid red;
  margin-bottom: 1em; }

.flex {
  display: flex;
  flex-direction: column;
  position: relative; }

#main { min-height: 300px; order: 2; }

#other { order: 3; }

/* desktop version */
@media (min-width:768px) {
  .flex { flex-direction: row; flex-wrap: wrap; }
  #main { width: 60%; }
  #search { order: 2; width: 40%; height: 100px }
  #other { width: 40%; position: absolute; top: 100px; right: 0; }
}

<div id="header">header</div>
<div class="flex">
  <div id="main">main</div>
  <div id="search">search</div>
  <div id="other">other</div>
</div>

jsFiddle：https://jsfiddle.net/azizn/uhwzyr9b/

所以从逻辑上讲，您可以尝试将 #search 和 #other 包装在另一个容器中，但是您不能将 #content 放在它们之间，因为 Flexbox 只能更改兄弟姐妹的顺序...唯一的解决方法可能是JavaScript。

编辑：您可以通过使用良好的旧浮动而不是 Flexbox 来实现您的布局：

#header, #main, #search, #other {
  padding:1em;
  box-sizing:border-box;
  border:1px solid red;
  margin-bottom:1em;
}

#main { min-height: 300px; }

@media (min-width:768px) {
  .container { overflow: auto; }
  #main { width: 60%; float: left; }
  #search { width:40%; float: right; }
  #other { width:40%; float: right; }
}

<div id="header">header</div>
<div class="container">
  <div id="search">search</div>
  <div id="main">main</div>
  <div id="other">other</div>
</div>

jsFiddle：https://jsfiddle.net/azizn/g5vxtbed/

【讨论】：