如何使用包装器 div 和在部分上使用弹性框

Question

我正在建立我的第一个网站，我有一些问题，弄清楚如何结合一个包装器，限制内容的max-width和使用flexx的部分。

我的网站的一个典型的部分是这样的:

<section class="hero flex">
<div class="wrapper">
<h1>Content 1</h1>
<p>Content 2</p>
<button>Content 3</button>
</div>
</section>

我遇到了以下问题:

1. 在section&amp之间添加包装器div时;内容，内容不再是section的直接子，因此不受挠性的影响。因此，我无法将内容居中。

2. 如果我把类.hero和.wrapper放在section标签上，背景颜色会受到包装器的width/max-width的影响

我敢肯定我遇到了更多的问题，我还没有发现。因此，我感兴趣的是如何使用一个包装有限的最大宽度与弹性部分。

Answer 1

.hero{
max-width: 700px;
}
.wrapper{
width: 100%;
display: flex;
justify-content: space-between;
}

<section ="hero flex">
<div class="wrapper">
<h1>Content 1</h1>
<p>Content 2</p>
<button>Content 3</button>
</div>
</section>