html - 具有多列布局和移动 div 框排序的 flexbox

Question

我正在尝试使用 flexbox 创建附加框布局。

我的示例代码如下。 我的挑战不是移动设备而是桌面 View - 框元素 1 和 2 不是此布局中的 1 列。但是一旦我像下面那样使用嵌套，那么“order”在 flexbox 中就不起作用了。 父“flex 行”布局 -> 子“flex 列”布局

我想“嵌套”与“混合行和列 flexbox”与“排序”不能一起工作。

如果有人想用 flexbox 实现它，我想得到帮助..

.wrapper {
  display: flex;
  flex-direction: row; 
  flex-wrap:wrap;
	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

.wrapper {
	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。这不是更好的解决方案，但它可以是解决方案之一......谢谢你们。