尝试在Flex Box中创建Flex Box

Question

我有一个页脚，它在已经在flexbox中的节的下面。因此，既是.main flex-box的flex-item，也是由5个flex-items组成的单独flex-box的flex-container。我正准备使用flex列，但是flex box已经创建好了。

我正在尝试使用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;
}