Flexbox布局查询，行到列

Question

我正在尝试从此（移动）实现基于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/

Answer 1

这里的问题是，如果您的主要元素（#main，#search和#other）是兄弟姐妹，除非您知道固定高度，否则您无法通过Flexbox真正做到这一点值#search（带有position: absolute的hacky解决方案）：

＆＃13;

＆＃13;

#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; }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

编辑：您可以使用优质的旧浮动代替Flexbox来实现布局：

＆＃13;

＆＃13;

#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; }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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