Использование Flexbox для создания боксов бок о бок

Question

Я пытаюсь сделать так, чтобы классы explanation и participation были flexbox, но бок о бок друг с другом.Хотя под ними benefits и requirements будут накладываться друг на друга.

Я попытался использовать flex-direction:row; для секции explanation и participation, а затем переключиться на flex-direction: column;в остальном, но это не работает.Мне нужна помощь, чтобы понять, что это можно сделать.Кроме того, я не могу изменить свой HTML.

.main {
  display: flex;
}

.benefits {
  flex-direction: column;
}

.requirements {
  flex-direction: column;
}

<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>Download</p>
  </section>

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

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

Answer 1

Вы можете использовать упаковка flexbox и использовать flex-basis для настройки макета - см. Демонстрацию ниже:

main{
   display: flex; 
   flex-wrap: wrap; /* wrapping flexbox */
   /* flex-direction is row by default - so not specified */
}

.explanation, .participation{
   flex-basis: 50%; /* occupy half a row (flex line) */
}

.benefits, .requirements{
   flex-basis: 100%; /* occupy the whole row (flex line) */
}

main > section { /* styling for illustration */
  border: 1px solid;
  box-sizing: border-box;
}

<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>Download</p>
  </section>

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

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

Answer 2

flex-direction применяется от гибкого родителя и может быть одним или другим, чтобы заложить детей (рядом или сверху вниз). Детское выравнивание можно сделать индивидуально, но это не о направлении. (см. Ссылки ниже фрагмента, чтобы узнать больше о flex)

Вы можете разрешить элементу обтекание, а также можете установить ширину или гибкую основу для любого из них.

Из вашего кода это можно сделать просто из flex-wrap:wrap и flex-basis/* or width */ : 100%;.

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

.benefits,
.requirements {
  flex-basis: 100%;
}

section {
  /* to spray them evenly on a row instead sizing */
  flex: 1;
}


/* demo purpose from here */

section {
  margin: 2px;
  border: solid;
}

<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>Download</p>
  </section>

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

  <section class="requirements" id="zen-requirements" role="article">
    <h3>Requirements</h3>
    <p>gtgtgtg</p>
  </section>
  <!-- demo purpose -->
  <section>demo purpose</section>
  <section>demo purpose</section>
  <section>demo purpose</section>

Полезные ссылки / ссылки на ресурсы: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

Answer 3

Вы должны активировать перенос, а затем просто отрегулировать ширину ваших элементов:

.main {
  display: flex;
  flex-wrap: wrap;
}
.main > section {
  width:50%; /*half the width by default to all section*/
  text-align:center;
  border:1px solid;
}

section.benefits,
section.requirements {
  width:100%; /*full width so they stack above each other*/
}

* {
  box-sizing:border-box;
}

<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>Download</p>
  </section>

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

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

И с некоторым интервалом:

.main {
  display: flex;
  flex-wrap: wrap;
}
.main > section {
  flex-basis:40%;
  flex-grow:1;
  text-align:center;
  border:1px solid;
  margin:10px;
}

section.benefits,
section.requirements {
  flex-basis:90%; /*full width so they stack above each other*/
}

* {
  box-sizing:border-box;
}

<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>Download</p>
  </section>

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

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

Связанный: Как добавить 1px поле для гибкого элемента, который является гибким: 0 0 25%?