Trying to Create a Flex Box in A Flex Box

Question

I have a footer which is under a section that is already in a flexbox. So, is both a flex-item of the .main flex-box AND it is a flex-container for a separate flex-box made up of the five s as flex-items. I was rtying to using flex column, but the flex box was already created.

I'm trying to layout the five footer links using flexbox, assigning equal width to each and centering each within its box. Also setting a width for the container.

I can't seem to figure this out since it is under one section. I need help figuring out how to make this 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

You can just add the display: flex property to the footer, and any other flex properties you need. Flex containers can be nested without issues.

 * { 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

You just need to add the flexbox info to footer. Here is what worked for me:

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

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