html - CSS Flexbox 组 2 flex 元素

Question

我正在尝试学习 Flexbox，但我被我想创建的布局困住了。

在手机上我有以下布局:

是否可以在桌面上获得以下布局？

代码:

.wrapper {  
  display: flex;  
  flex-flow: row wrap;
}
.wrapper > * {
  padding: 10px;
  flex: 1 100%;
  border: 1px solid grey;
}
@media all and (min-width: 600px) {
  .wrapper > article { 
    flex: 3 66%;
  }
  .wrapper > aside {
    flex: 1 33%;
  }
}


/* rest of styling */
* {
  box-sizing: border-box;
}
h1 {
  color: #FFF;
  font-size: 16px;
  font-family: sans-serif;
  text-align: center;
}
article {
  height: 100px;
}
aside {
  height: 62px;
}

.article1 {
  background-color: Crimson;
}
.article2 {
  background-color: DarkCyan;
}
aside {
  background-color: DimGray;
}
header {
  background-color: gold;
}

<div class="wrapper">
  <header>
    <h1>header</h1>
  </header>
  <article class="article1">
    <h1>Article 1</h1>
  </article>
  <aside class="aside1">
    <h1>aside 1</h1>
  </aside>
  <article class="article2">
    <h1>Article 2</h1>
  </article>
  <aside class="aside2">
    <h1>aside 2</h1>
   </aside>
 </div>
  

我应该把这两个 flex 元素放在一起吗？ (甚至可能吗？)还是应该使用列而不是行？

Answer 1

根据您的要求，没有固定高度，这不能单独使用 flexbox 来完成。

您要么需要使用脚本，它可以在调整大小时移动一些元素，就像在这个答案中一样，re-order flexbox item ，或者像下面的示例一样，将 flexbox 与 float

组合

.wrapper {  
  display: flex;
  flex-direction: column;
}
.wrapper > * {
  padding: 10px;
  flex: 1 100%;
  border: 1px solid grey;
}
.aside1 { order: 2; }
.aside2 { order: 4; }
.article1 { order: 1; }  
.article2 { order: 3; }  

@media all and (min-width: 600px) {
  .wrapper {  
    display: block;  
  }
  aside { float: right; width: 33.33%; }
  article { float: left; width: 66.66%; }  
}


/* rest of styling */
* {
  box-sizing: border-box;
}
h1 {
  color: #FFF;
  font-size: 16px;
  font-family: sans-serif;
  text-align: center;
}
article {
  height: 100px;
}
aside {
  height: 62px;
}
.article1 {
  background-color: Crimson;
}
.article2 {
  background-color: DarkCyan;
}
aside {
  background-color: DimGray;
}
header {
  background-color: gold;
}

<div class="wrapper">
  <header>
    <h1>header</h1>
  </header>

  <aside class="aside1">
    <h1>aside 1</h1>
  </aside>
  <article class="article1">
    <h1>Article 1</h1>
  </article>

  <aside class="aside2">
    <h1>aside 2</h1>
  </aside>
  <article class="article2">
    <h1>Article 2</h1>
  </article>
 </div>

---

在评论后更新了第二个示例

如果你想单独使用 flexbox 而没有脚本，order 属性将使元素排序变得容易，但你需要一个内部包装器固定高度

当然，您也可以将 header 移到包装器之外，不过我想您希望它们都在一个容器中

.innerwrapper {  
  display: flex;
  flex-direction: column;
}
header, .innerwrapper > * {
  padding: 10px;
}
.innerwrapper > * {
  border: 1px solid gray;
}

@media all and (min-width: 600px) {
  .innerwrapper {
    height: 220px;
    flex-wrap: wrap;
  }
  article {
    width: 66.66%;
  }
  aside {
    width: 33.33%;
  }
  .aside1 { order: 3; }
  .aside2 { order: 4; }
  .article2 { order: 2; }  
}


/* rest of styling */
* {
  box-sizing: border-box;
}
h1 {
  color: #FFF;
  font-size: 16px;
  font-family: sans-serif;
  text-align: center;
}
article {
  height: 100px;
}
aside {
  height: 62px;
}
.article1 {
  background-color: Crimson;
}
.article2 {
  background-color: DarkCyan;
}
aside {
  background-color: DimGray;
}
header {
  background-color: gold;
}

<div class="wrapper">
  <header>
    <h1>header</h1>
  </header>

  <div class="innerwrapper">        
    <article class="article1">
      <h1>Article 1</h1>
    </article>
    <aside class="aside1">
      <h1>aside 1</h1>
    </aside>
    <article class="article2">
      <h1>Article 2</h1>
    </article>
    <aside class="aside2">
      <h1>aside 2</h1>
    </aside>
  </div>
</div>