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

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

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

相关：How to add 1px margin to a flex item that is flex: 0 0 25%?

Answer 2

您可以使用包装弹性盒并使用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 3

flex-direction是从flex父级中应用的，并且可以是一个或另一个来放置子级（并排或从上到下）。儿童对齐可以单独进行，但与方向无关。 （请参阅代码段下方的链接以了解有关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>

usefull /资源链接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

使用Flexbox并排创建CSS框

3 个答案: