我正在努力使explanation
和participation
类成为flexboxes,但它们是并排的。而在它们下面,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>
发布于 2019-04-25 08:01:49
你必须激活包装,然后简单地调整元素的宽度:
.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%?
https://stackoverflow.com/questions/55840007
复制相似问题