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

问题描述

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

在移动设备上，我有以下布局:

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

代码:

.wrapper {显示:弹性；flex-flow:行包装；}.wrapper >* {填充:10px；弹性:1 100%；边框:1px 纯灰色；}@media all 和(最小宽度:600px){.wrapper >文章 {弹性:3 66%；}.wrapper >在旁边 {弹性:1 33%；}}/* 其余样式 */* {box-sizing: 边框框；}h1{颜色:#FFF；字体大小:16px；字体系列:无衬线；文本对齐:居中；}文章 {高度:100px；}在旁边 {高度:62px；}.第1条 {背景颜色:深红色；}.article2 {背景颜色:深青色；}在旁边 {背景颜色:暗灰色；}标题{背景颜色:金色；}

<标题><h1>标题</h1></标题><文章类=文章1"><h1>第1条</h1></文章><aside class="aside1"><h1>除了1</h1></一边><article class="article2"><h1>第2条</h1></文章><aside class="aside2"><h1>除了2</h1></一边>

我应该将两个放在一边的 flex 项目分组吗?(甚至可能吗?)还是应该使用列而不是行?

解决方案

根据你的要求，没有固定高度，单独使用 flexbox 是做不到的.

您要么需要使用脚本，它可以在调整大小时移动一些元素，例如在这个答案中，重新排序 flexbox item，或者如下面的例子，结合 flexbox 和 float

.wrapper {显示:弹性；弹性方向:列；}.wrapper >* {填充:10px；弹性:1 100%；边框:1px 纯灰色；}.aside1 { 订单:2;}.aside2 { 顺序:4;}.article1 { 订单:1;}.article2 { 订单:3;}@media all 和(最小宽度:600px){.包装{显示:块；}一边{浮动:对；宽度:33.33%；}文章 { 浮动:左；宽度:66.66%；}}/* 其余样式 */* {box-sizing: 边框框；}h1{颜色:#FFF；字体大小:16px；字体系列:无衬线；文本对齐:居中；}文章 {高度:100px；}在旁边 {高度:62px；}.第1条 {背景颜色:深红色；}.article2 {背景颜色:深青色；}在旁边 {背景颜色:暗灰色；}标题{背景颜色:金色；}

<标题><h1>标题</h1></标题><aside class="aside1"><h1>除了1</h1></一边><文章类=文章1"><h1>第1条</h1></文章><aside class="aside2"><h1>除了2</h1></一边><article class="article2"><h1>第2条</h1></文章>

<小时>

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

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

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

.innerwrapper {显示:弹性；弹性方向:列；}标头，.innerwrapper >* {填充:10px；}.innerwrapper >* {边框:1px纯灰色；}@media all 和(最小宽度:600px){.内包装{高度:220px；flex-wrap: 包裹;}文章 {宽度:66.66%；}在旁边 {宽度:33.33%；}.aside1 { 顺序:3;}.aside2 { 顺序:4;}.article2 { 订单:2;}}/* 其余样式 */* {box-sizing: 边框框；}h1{颜色:#FFF；字体大小:16px；字体系列:无衬线；文本对齐:居中；}文章 {高度:100px；}在旁边 {高度:62px；}.第1条 {背景颜色:深红色；}.article2 {背景颜色:深青色；}在旁边 {背景颜色:暗灰色；}标题{背景颜色:金色；}

<标题><h1>标题</h1></标题><div class="innerwrapper"><文章类=文章1"><h1>第1条</h1></文章><aside class="aside1"><h1>除了1</h1></一边><article class="article2"><h1>第2条</h1></文章><aside class="aside2"><h1>除了2</h1></一边>

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?

The code:

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

解决方案

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

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

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

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