Flexbox的佈局查詢，行分列

-3

我想實現從這個（移動）基於Flexbox的過渡：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/

來源

2016-04-27 Chris Cooke

TTP：//計算器。 com/help/how-to-ask –

一張圖片勝過千言萬語。同時提供你到目前爲止的代碼。 – Aziz

歡迎來到Stack Overflow！預計你至少試圖爲自己編碼。堆棧溢出不是代碼寫入服務。我建議你做一些額外的研究，無論是通過谷歌或通過搜索，做一個嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

這裏的問題是，你不能真正做到這一點與Flexbox的，如果你的主要元素（#main，#search和#other）是兄弟姐妹，除非你知道的固定身高值（與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/

來源

2016-04-27 20:04:24 Aziz

Flexbox的佈局查詢，行分列

回答

相關問題