マルチカラムレイアウトとモバイルdivボックスオーダーのフレックスボックス

Question

フレックスボックスで添付ファイルのレイアウトを作成しようとしています。

私のコード例は以下の通りです。 私のチャレンジはモバイルではなくデスクトップビューです。ボックスの項目1と2はこのレイアウトでは1列ではありません。しかし、一度私は以下のような入れ子を使用すると、 "注文"はフレックスボックスで動作しません。 親「フレックスロー」レイアウト - >子「フレックスカラム」レイアウト

"順序と"の "混在した行と列のフレックスボックス"を含む "ネスト"は一緒に動作しないとします。誰かがフレキシボックスでそれを達成するための任意のアイデアを持っている場合、私は助けを取得したい

..

.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>

Answer 1

は、私はあなたが絶対位置ボックス3は条件付きでこれを達成するためにする必要がありますだと思いますレイアウト。

Answer 2

.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人のニーズ絶対レイアウトとそれがよりよい解決策はありませんが、それは解決策の一つであることができる唯一の2と3をフレキシボックスを使用するには...君たちに感謝しますと女性。