CSS Flexbox组2弹性项目 [英] CSS Flexbox group 2 flex items

问题描述

我正在尝试学习Flexbox，但我坚持要创建的布局.

I'm trying to learn Flexbox and I'm stuck with a layout I want to create.

在移动设备上，我的布局如下:

On mobile I have the following layout:

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

Is it possible to get the following layout on desktop?

代码:

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

我应该将两个弹性项目组合在一起吗? (甚至有可能吗?)还是应该使用列而不是行?

Should I group the two aside flex items? (is it even possible?) Or should I use columns instead of rows?

推荐答案

根据您的要求，没有固定的高度，仅凭flexbox不能做到这一点.

Based on your requirements, no fixed height, this can't be done with flexbox alone.

您要么需要使用脚本，否则可能会在调整大小时移动某些元素，例如在此答案中，对flexbox项目进行重新排序，或者如以下示例所示，将flexbox与float

You either need to use script, which could move some elements on resize, like in this answer, re-order flexbox item, or as in below sample, combining flexbox with 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>

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

Updated with a 2:nd sample after a comment

如果您只想单独使用flexbox而不使用脚本，则order属性将使对元素进行排序变得容易，但是您将需要一个具有固定高度的内部包装器

If you want to go with flexbox alone, and no script, the order property will make it easy to sort the elements but you'll need a inner wrapper with a fixed height

您当然也可以将header移到包装器的外部，尽管我想您希望将它们全部放在一个容器中

You can of course move the header outside the wrapper as well, though I guess you want them all in one container

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

这篇关于CSS Flexbox组2弹性项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！