我要完成的工作是在页面的简介部分使用一个flex框。这将使3个不同的盒子彼此堆叠。接下来,我希望接下来的2个框并排放置,而下面的2个框则彼此叠放。为了完成下一部分,我必须创建另一个具有flex-direction的flex框:row。

我能够使前三名相互叠放,但是我不确定如何使用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>

最佳答案

您只需要在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>

10-05 20:36
查看更多