Flexbox Footer

vertical flexbox nested inside horizontal flexbox

by kpowz

HTML

<footer>
    <div>
    Sitemap
    <ul role="navigation sitemap">
    <li href="downloads">About</li>
    <li href="docs">Jobs</li>
    <li href="news">Help</li></ul>
    </div>
    
    <div>
    Partners
    <ul >
    <li href="downloads">BOA</li>
    <li href="docs">SEC</li>
    <li href="news">PPC</li></ul>  
    </div>
    
    <div>
    Powered by
    <ul >
    <li href="downloads">AWS</li>
    <li href="docs">Docker</li>
    <li href="news">Kafka</li></ul> 
    </div>
    
    <div class='flex-col'>
        <details>
            <summary>Glossary</summary>
            <dl>
                <dt>1</dt> <dd>one</dd>
                <dt>2</dt> <dd>two</dd>
                <dt>2</dt> <dd>three</dd>
            </dl>
        </details>
        <small class='omega'>&copy; 2015</small>
    </div>
</footer>

CSS

footer{
    display: flex;
    justify-content: space-around;
}

footer .flex-col{
    display: flex;
   // flex: 1;
    flex-direction: column;
}

.omega {
  display: flex;
  flex: 1; /* key*/
  align-items: flex-end;
}