我要完成的工作是在页面的简介部分使用一个flex框。这将使3个不同的盒子彼此堆叠。接下来,我希望接下来的2个框并排放置,而下面的2个框则彼此叠放。为了完成下一部分,我必须创建另一个具有flex-direction的flex框:row。
我能够使前三名相互叠放,但是我不确定如何使用flex来为第二部分进行布局,因为它们都在一个小节中。
enter image description here
.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>
最佳答案
您只需要在main
(和flex-wrap
)上使用flexbox并在相关元素上应用适当的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>