使用 Flex Box 使一些盒子垂直和水平答案

【问题标题】：Using Flex Box to Make Some Boxes Vertical and Horizontal使用 Flex Box 使一些盒子垂直和水平
【发布时间】：2019-04-26 00:20:47
【问题描述】：

我想要完成的是让一个弹性框与我的页面的介绍部分一起使用。这会将 3 个不同的盒子堆叠在一起。接下来，我希望接下来的 2 个盒子并排放置，而下面的 2 个盒子则堆叠在一起。要完成下一部分，我必须使用 flex-direction: row 创建另一个弹性框。

我能够让前 3 个堆叠在一起，但我不确定如何使用 flex 为第二部分制作布局，因为它们都在一个部分下。

enter image description here

.page-wrapper {
  /*display: flex;*/
  /*flex-flow: wrap;*/
  width: 60em;
  border-style: solid;
  border-color: red;
}

.intro {
  display: flex;
  flex-direction: column;
}

header {
  border-style: solid;
  border-color: red;
  margin-bottom: 1em;
}

.summary {
  font-style: italic;
  border-style: solid;
  border-color: red;
  margin: 1em;
  padding: 1em;
  text-align: center;
}

.preamble {
  border-style: solid;
  border-color: red;
  margin: 1em;
  padding: 1em;
}

.main {
  display: flex;
}

.explanation,
.participation {
  flex-direction: row;
}

.benefits,
.requirements {
  flex-direction: column;
}

<body id="css-zen-garden">
  <div class="page-wrapper">

    <section class="intro" id="zen-intro">
      <header role="banner">
        <h1>CSS Zen Garden</h1>
        <h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
      </header>

      <aside class="summary" id="zen-summary" role="article">
        <p>A</p>
      </aside>

      <section class="preamble" id="zen-preamble" role="article">
        <h3>The Road to Enlightenment</h3>
        <p>Littering</p>
      </section>
    </section>

    <main class="main" id="zen-supporting" role="main">
      <section class="explanation" id="zen-explanation" role="article">
        <h3>What's This About?</h3>
        <p>There</p>
      </section>

      <section class="participation" id="zen-participation" role="article">
        <h3>Participation</h3>
        <p>Strong</p>
      </section>

      <section class="benefits" id="zen-benefits" role="article">
        <h3>Benefits</h3>
        <p>Why</p>
      </section>

      <section class="requirements" id="zen-requirements" role="article">
        <h3>Requirements</h3>
        <p>Where</p>
      </section>
      </section>

【问题讨论】：

听起来与您的旧问题相似：stackoverflow.com/q/55840007/8620333
是的，它们很接近，但在那个问题中，我得到了 % 和 px，但我只能使用 em

标签： html css flexbox

【解决方案1】：

您只需在 main（和 flex-wrap）上使用 flexbox 并在相关元素上应用适当的 flex 值（代替宽度）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.page-wrapper {
  /*display: flex;*/
  /*flex-flow: wrap;*/
  max-width: 60em;
  border-style: solid;
  border-color: red;
}

.intro {
  display: flex;
  flex-direction: column;
}

header {
  border-style: solid;
  border-color: red;
  margin-bottom: 1em;
}

.summary {
  font-style: italic;
  border-style: solid;
  border-color: red;
  margin: 1em;
  padding: 1em;
  text-align: center;
}

.preamble {
  border-style: solid;
  border-color: red;
  margin: 1em;
  padding: 1em;
}

.main {
  display: flex;
  flex-wrap: wrap;
}

.explanation,
.participation {
  flex-direction: row;
  flex: 1 0 calc(50% - 2em);
  border: 1px solid green;
  margin: 1em;
}

.benefits,
.requirements {
  flex-direction: column;
  flex: 1 1 100%;
  margin: 1em;
  border: 1px solid blue;
}

<body id="css-zen-garden">
  <div class="page-wrapper">

    <section class="intro" id="zen-intro">
      <header role="banner">
        <h1>CSS Zen Garden</h1>
        <h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
      </header>

      <aside class="summary" id="zen-summary" role="article">
        <p>A</p>
      </aside>

      <section class="preamble" id="zen-preamble" role="article">
        <h3>The Road to Enlightenment</h3>
        <p>Littering</p>
      </section>
    </section>

    <main class="main" id="zen-supporting" role="main">
      <section class="explanation" id="zen-explanation" role="article">
        <h3>What's This About?</h3>
        <p>There</p>
      </section>

      <section class="participation" id="zen-participation" role="article">
        <h3>Participation</h3>
        <p>Strong</p>
      </section>

      <section class="benefits" id="zen-benefits" role="article">
        <h3>Benefits</h3>
        <p>Why</p>
      </section>

      <section class="requirements" id="zen-requirements" role="article">
        <h3>Requirements</h3>
        <p>Where</p>
      </section>
      </section>

【讨论】：

你是一个活生生的救星！谢谢

【解决方案2】：

.page-wrapper {
    display: flex;
    flex-direction: column;
    width: 60em;
    border-style: solid;
    border-color: red;
}

.intro {
    display: flex;
    flex-direction: column;
}

header {
    border-style: solid;
    border-color: red;
    margin-bottom: 1em;
}

.summary {
    font-style: italic;
    border-style: solid;
    border-color: red;
    margin: 1em;
    padding: 1em;
    text-align: center;
}

.preamble {
    border-style: solid;
    border-color: red;
    margin: 1em;
    padding: 1em;
}

.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.explanation, .participation ,.benefits ,.requirements {
  padding: 20px;
  border: 1px solid #ccc;
  margin: 5px;
}

<div class="page-wrapper">
  <section class="intro" id="zen-intro">
    <header role="banner">
      <h1>CSS Zen Garden</h1>
      <h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
    </header>

    <aside class="summary" id="zen-summary" role="article">
      <p>A</p>
    </aside>

    <section class="preamble" id="zen-preamble" role="article">
      <h3>The Road to Enlightenment</h3>
      <p>Littering</p>
    </section>
  </section>

  <main class="main" id="zen-supporting" role="main">
    <section class="flex-row">
      <section class="explanation" id="zen-explanation" role="article">
        <h3>What's This About?</h3>
        <p>There</p>
      </section>

      <section class="participation" id="zen-participation" role="article">
        <h3>Participation</h3>
        <p>Strong</p>
      </section>
    </section>

    <section class="benefits" id="zen-benefits" role="article">
      <h3>Benefits</h3>
      <p>Why</p>
    </section>

    <section class="requirements" id="zen-requirements" role="article">
      <h3>Requirements</h3>
      <p>Where</p>
    </section>
  </main>
</div>

您需要将explanation、participation 部分包装在另一个部分中并将其设置为flex-direction 到row

Working Demo

【讨论】：

我无法更改 html 这是要求之一