Question

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

boxlayout

我的示例代码如下。我的挑战不是移动，而是桌面视图 - 此项布局中的第1项和第2项不是1列。但是一旦我像下面那样使用嵌套，那么“order”在flexbox中不起作用。 parent“flex row”布局 - ＆gt;子“弹性列”布局

我认为“嵌套”与“混合行和列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

＆＃13;

.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%;}
}

＆＃13;

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

＆＃13;

正如@yaycmyk所说，方框3需要绝对布局并且仅使用2个和3个弹性框架。这不是更好的解决方案，但它可以是解决方案之一...谢谢你们和女士们。

Answer 2

我认为您需要有条件地定位方框3以实现此布局。

Flexbox具有多列布局和移动div盒订购

2 个答案: