使用Flex Box使某些盒子垂直和水平

时间：2019-04-25 15:23:29

标签： html css flexbox

我要完成的工作是在页面的简介部分使用一个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>

2 个答案:

答案 0 :(得分：0)

.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

答案 1 :(得分：0)

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

相关问题
最新问题