flexbox與多列布局和移動div箱訂購

我試圖創建與flexbox附加框佈局。flexbox與多列布局和移動div箱訂購

boxlayout

我的示例代碼如下。我的挑戰不是手機，而是桌面視圖 - 在此佈局中，方框1和方框2不是1列。但是，一旦我使用下面的嵌套，那麼「訂單」在flexbox中不起作用。父級「柔性行」佈局 - >子級「柔性列」佈局

我認爲「混合行和列柔性盒」與「排序」不會一起工作。

如果有人有任何想法與Flexbox的去實現它，我希望得到幫助..

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap:wrap; 
 
\t margin: -10px -10px -10px 180px; 
 
} 
 
.wrapper > * { 
 
    padding: 10px; 
 
    flex: 1 100%; 
 
} 
 

 
.header { 
 
    background: tomato; 
 
    height: 60px; 
 
    width: 100%; 
 
} 
 
.breadcrumb{ 
 
    background: green; 
 
    height: 30px; 
 
    width: 100%; 
 
} 
 
.footer { 
 
    background: lightgreen; 
 
} 
 

 
.main { 
 
    text-align: left; 
 
    background: deepskyblue; 
 
    flex: 1; 
 
} 
 

 
.aside-1 { 
 
    background: pink; 
 
    padding: 10px; 
 
    flex: 1; 
 
} 
 
.aside-2 { 
 
    background: gold; 
 
    padding: 10px; 
 
    flex: 1; 
 
} 
 

 
@media only screen and (max-width: 979px) { 
 
    .wrapper { 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-flex: 1; 
 
    flex: 1; 
 
    display:flex; 
 
    margin: -10px -10px -10px -10px ; 
 
    } 
 
    
 
    .main { order: 2; } 
 
    .aside-1 { 
 
    order :1; 
 
    } 
 
    .aside-2 { 
 
    order :3; } 
 
    .footer { order: 4; } 
 
}

<div class="wrapper"> 
 
<header class="header">Header</header> 
 
    <div class="breadcrumb">Bread</div> 
 
    <div class="aside-1">Menuline1</div> 
 
    <div class="aside-2"><p>Menucontent</p> 
 
    <p>Menucontent</p> 
 
    <p>Menucontent</p> 
 
    <p>Menucontent</p> 
 
    <p>Menucontent</p> 
 
    <p>Menucontent</p> 
 
    <p>Menucontent</p></div> 
 
    <div class="main">  
 
     <p>Contents</p> 
 
     <p>Contents</p> 
 
     <p>Contents</p> 
 
     <p>Contents</p> 
 
    </div> 
 
<footer class="footer">フッター</footer> 
 
</div>

來源

2016-09-20 Norimitsu Shida

相關 - http://stackoverflow.com/questions/28654686/does-this-flexbox-based-layout-require-extra-markup?rq=1 –

基本上，*除非身高已知*，你需要一個「列」一側的額外包裝，這意味着（直到支持'display：contents'），你**不能**用flexbox做到這一點。 –

嗨保利，謝謝你的評論。正如你所說，我也認爲，如果我只想通過flexbox來做到這一點，就無法實現。我有另一種解決方案來實現這種佈局，它是box2＆3在flexbox中，其他元素是通常的CSS佈局。然後它工作。感謝您的評論。 –

-1

我認爲你需要絕對位置框3有條件實現這一目標佈局。

來源

2016-09-21 04:39:41 probablyup

謝謝yaycmyk，我有另一種解決方案，我會把它放在下面。 –

.wrapper { 
 
\t margin: -10px -10px -10px 180px; 
 
} 
 
.wrapper > * { 
 
    padding: 10px; 
 
} 
 
.flex{ 
 
    display: -webkit-box;/* Android4.3以前ブラウザ用 */ 
 
    display: -webkit-flex;/* iOS8以前Safari用 */ 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap:wrap; 
 
    margin: -10px -20px -10px -10px; 
 
    flex: 1 100%; 
 
} 
 
.header { 
 
    background: tomato; 
 
    height: 60px; 
 
    width: 100%; 
 
} 
 
.breadcrumb{ 
 
    background: green; 
 
    height: 30px; 
 
    width: 100%; 
 
} 
 
.footer { 
 
    background: lightgreen; 
 
    min-width: 100%; 
 
} 
 

 
.main { 
 
    -webkit-box-flex: 1;/*--- Android4.3以前ブラウザ用 ---*/ 
 
    -webkit-flex: 1;/*--- iOS8以前Safari用 ---*/ 
 
    flex: 1; 
 
    text-align: left; 
 
    background: deepskyblue; 
 
    flex: 1; 
 
    margin: -150px 0px 0px 0px; 
 
} 
 

 
.aside-1 { 
 
    background: pink; 
 
    padding: 10px; 
 
    max-width:320px; 
 
    height:130px; 
 
} 
 
.aside-2 { 
 
    -webkit-box-flex: 1;/*--- Android4.3以前ブラウザ用 ---*/ 
 
    -webkit-flex: 1;/*--- iOS8以前Safari用 ---*/ 
 
    flex: 1; 
 
    background: gold; 
 
    padding: 10px; 
 
    max-width:320px; 
 
} 
 

 
@media only screen and (max-width: 979px) { 
 
    .wrapper { 
 
    margin: -10px -10px -10px -10px ; 
 
    width:100%; 
 
    height:100%; 
 
    } 
 
    .flex{ 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-flex: 1; 
 
    flex: 1; 
 
    display:flex; 
 
    } 
 
    .header{ 
 
    height:10%; 
 
    } 
 
    .breadcrumb{ 
 
    height:10%; 
 
    } 
 
    .aside-1 
 
    { 
 
    height: 10%; 
 
    min-width: 100%; 
 
    } 
 
    .main { 
 
    margin: 0 0 0 0 ; 
 
    order: 1; } 
 
    .aside-2 { 
 
    order :2; 
 
    min-width: 100%;} 
 
}

<div class="wrapper"> 
 
<header class="header">ヘッダー畫像</header> 
 
    <div class="breadcrumb">パンくずリスト</div> 
 
    <div class="aside-1">メニュー文言</div> 
 
    <div class="flex"> 
 
    <div class="aside-2"><p>メニュー內容</p> 
 
    <p>メニュー內容</p> 
 
    <p>メニュー內容</p> 
 
    <p>メニュー內容</p> 
 
    <p>メニュー內容</p> 
 
    <p>メニュー內容</p> 
 
    <p>メニュー內容</p></div> 
 
    <div class="main">  
 
     <p>メインコンテンツがここに入ります</p> 
 
     <p>メインコンテンツがここに入ります</p> 
 
     <p>メインコンテンツがここに入ります</p> 
 
     <p>メインコンテンツがここに入ります</p> 
 
    </div> 
 
     </div> 
 
<footer class="footer">フッター</footer> 
 
</div>

正如@yaycmyk說，盒子3層的需求絕對佈局和使用Flexbox的只有2和3。它不是更好的解決方案，但它可以是一個解決方案...謝謝你們和女士們。

來源

2016-09-24 16:18:20

flexbox與多列布局和移動div箱訂購

回答

相關問題