使用Flexbox并排创建CSS框 [英] Using Flexbox To Make Boxes Side By Side CSS

问题描述

我正在尝试使explanation和participation类是flexbox，但彼此并排.在它们下面时，benefits和requirements会彼此堆叠.

I'm trying to make it so that the explanation and participation class are flexboxes, but side by side to each other. While below them benefits and requirements would be stacked on top of each other.

我试图在explanation和participation部分中使用flex-direction:row;，然后将其余部分切换到flex-direction: column;，但这是行不通的.我需要帮助才能弄清楚这可以完成.另外，我无法更改HTML.

I tried to use flex-direction:row; for the explanation and participation section, and then switch to flex-direction: column; for the rest, but that isn't working. I need help trying to figure out this can be done. Also,I can't change my 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>

推荐答案

您必须激活自动换行，然后简单地调整元素的宽度:

You have to activate the wrap then simply adjust the width of your elements:

.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>

相关:如何为flex为0:0 25％的flex项目增加1px的边距?

这篇关于使用Flexbox并排创建CSS框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！