Использование Flex Box, чтобы сделать некоторые боксы вертикальными и горизонтальными - PullRequest
Новая
       11

Использование Flex Box, чтобы сделать некоторые боксы вертикальными и горизонтальными

0 голосов
/ 25 апреля 2019

То, что я пытаюсь сделать, - это использовать один гибкий блок со вступительным разделом моей страницы.Это сложит 3 разных коробки друг на друга.Далее, я хочу, чтобы следующие 2 блока были рядом, а 2 ниже расположены друг над другом.Чтобы сделать это в следующей части, мне нужно создать еще один flex-бокс с flex-direction: row.

Мне удалось заставить верхнюю тройку складываться друг на друга, но я не уверен, как использовать flex для создания макета для второй части, поскольку они все находятся в одном разделе.

введите описание изображения здесь 

.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 голосов
/ 25 апреля 2019

Вам просто нужно использовать flexbox на main (и flex-wrap) и применять соответствующие значения 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>
0 голосов
/ 25 апреля 2019 

.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

Рабочая демоверсия

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...