尝试在 Flex Box 中创建 Flex Box

Question

我有一个页脚，它位于 flexbox 中已经存在的部分下。 因此，它既是 .main flex-box 的 flex-item，又是一个单独的 flex-box 的 flex-container，由五个 s 作为 flex-items 组成。 我正在尝试使用 flex 列，但 flex 框已经创建。

我正在尝试使用 flexbox 布局五个页脚链接，为每个链接分配相等的宽度并将每个链接在其框内居中。 还为容器设置宽度。

我似乎无法弄清楚这一点，因为它在一个部分之下。 我需要帮助弄清楚如何制作这个 flexbox。

 * { margin: 0; padding: 0; box-sizing: border-box; } ::before, ::after { box-sizing: inherit; } 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; }

 <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> <footer> <a href="http://validator.w3.org/check/referer" title="Check the validity of this site&#8217;s HTML" class="zen-validate-html">HTML</a> <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this site&#8217;s CSS" class="zen-validate-css">CSS</a> <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" title="View the Creative Commons license of this site: Attribution-NonCommercial-ShareAlike." class="zen-license">CC</a> <a href="http://mezzoblue.com/zengarden/faq/#aaa" title="Read about the accessibility of this site" class="zen-accessibility">A11y</a> <a href="https://github.com/mezzoblue/csszengarden.com" title="Fork this site on Github" class="zen-github">GH</a> </footer> </main>

Answer 1

您可以将display: flex属性添加到页脚，以及您需要的任何其他 flex 属性。 Flex 容器可以毫无问题地嵌套。

 * { margin: 0; padding: 0; box-sizing: border-box; } ::before, ::after { box-sizing: inherit; } 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; } footer { display: flex; justify-content: space-around; width: 100%; margin: 1em; border: 1px solid red; }

 <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> <footer> <a href="http://validator.w3.org/check/referer" title="Check the validity of this site&#8217;s HTML" class="zen-validate-html">HTML</a> <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this site&#8217;s CSS" class="zen-validate-css">CSS</a> <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" title="View the Creative Commons license of this site: Attribution-NonCommercial-ShareAlike." class="zen-license">CC</a> <a href="http://mezzoblue.com/zengarden/faq/#aaa" title="Read about the accessibility of this site" class="zen-accessibility">A11y</a> <a href="https://github.com/mezzoblue/csszengarden.com" title="Fork this site on Github" class="zen-github">GH</a> </footer> </main>

Answer 2

您只需要将 flexbox 信息添加到页脚。 这是对我有用的：

footer {
 display: flex;
 flex-direction: column;
 justify-content: center;
 width: 100%;
 }

footer a {
  text-align: center;
  width: 80px;
  margin: 0 auto;
}