CSS 弹性盒子布局 分组 2 弹性项目

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项目分组吗？（这是否可能？）还是应该使用列而不是行？

- klaasjansen

---

这似乎是相似的问题： https://stackoverflow.com/questions/47383140/making-two-adjacent-elements-behave-like-a-single-element?noredirect=1#comment81754008_47383140 - Rolf

Answer 1

根据您的要求，不能使用flexbox单独实现无固定高度。

您需要使用脚本，在调整大小时移动一些元素，例如在这个答案中重新排列flexbox项目，或者像下面的示例一样，将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>

您IP地址为146.190.162.183，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。

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

- Asons

---

@klaasjansen 有时候你不得不改变HTML的顺序，无论你是否想要，我会更新我的答案并提供第二个示例。 - Asons

@klaasjansen 我更新了我的回答。 - Asons

抱歉，我也不想要一个固定的高度。 - klaasjansen

@klaasjansen 那么我的第一个示例可以解决这个问题......如果你只想使用flexbox，你会需要一个脚本。 - Asons

我认为我创建了一个问题，如果不改变HTML并使用浮动将无法解决，但这些答案不是我的解决方案。 - klaasjansen

Answer 2

我也遇到了同样的问题： 如何使相邻的两个元素表现为一个单一元素

目前可能的解决方案是（适用于桌面布局）：

• 使用浮动而不是弹性盒子
• 使用网格设计而不是弹性盒子（不支持IE）
• 有一个“break-after”CSS属性，但仅在Firefox中受支持
• 在分组元素周围添加包装器元素。

- Rolf

---

根据这个问题，你提到的第二至第四点都不适用，因为用户要求使用Flexbox（而非Grid），无法换行（无法像图片中展示的那样堆叠），也不能使用“break-after”（只能覆盖10%的用户）。至于第一点，我已经回答过了，这是目前实现此功能的最佳解决方案。 - Asons

是的，我也想使用Flexbox，但目前看来没有现实的方法可以使用Flexbox。顺便说一下，如果我们按照你的逻辑，point也无济于事，因为用户要求使用Flexbox。 - Rolf

没错，这就是我在回答中第一行所说的。请问您能否回复我在您自己的问题下发表的评论呢？ - Asons