Flexbox Article 2

by junyuecao

HTML

<body id="vanilla_discussions_index">
    <header id="top">
        <div>
<a href="/">
Flex<span>-Tricks</span>
</a>

        </div>
    </header>
    <div id="Body">
        <nav id="main-nav">
<a href="/">
<span data-icon="" aria-hidden="true"></span>Home
</a>

<a href="/forums/">
<span data-icon="9" aria-hidden="true"></span>Forums
</a>

<a href="/snippets/">
<span data-icon="Q" aria-hidden="true"></span>Snippets
</a>

<a href="/gallery/">
<span data-icon="p" aria-hidden="true"></span>Gallery
</a>

<a href="/video-screencasts/">
<span data-icon="q" aria-hidden="true"></span>Videos
</a>

<a href="/almanac/">
<span data-icon="ó" aria-hidden="true"></span>Almanac
</a>

<a href="/downloads/">
<span data-icon="w" aria-hidden="true"></span>Demos
</a>

<a href="/lodge/">
<span data-icon="6" aria-hidden="true"></span>Lodge
</a>

        </nav>
        <div id="Content">
            <div class="left">
                <div>
                    
<h1>
All Discussions
</h1>

                </div>
                <ul>
                    <li>
                        <div>
                            
<h2>
<a href="/forums/discussion/19264/horizontal-scrolling-inside-divs-on-mobile-devices">[Solved] Horizontal scrolling inside divs on mobile devices</a>
</h2>

                            <div>
<span>4 comments</span>

<span>Most recent by <a href="/forums/profile/42509/JDDurrant">JDDurrant</a></span>

<span>April 28</span><span><a href="/forums/categories/css">CSS Combat</a></span>

                            </div>
                        </div>
                    </li>
                    <li>
                        <div>
                            
<h2>
<a href="/forums/discussion/24493/bootstrap-navbar-question">Bootstrap Navbar Question</a>
</h2>

                            <div>
<span>1 comment</span>

<span>Started by <a href="/forums/profile/39513/jubcheng">jubcheng</a></span>

<span>April 28</span><span><a href="/forums/categories/css">CSS Combat</a></span>

...

CSS

header {
    position:absolute;
    margin-top:-10em;
    margin-left:-1em;
    z-index:1;
}
header>div {
    padding-top:5em;
    padding-left:4em;
    box-sizing:border-box;
    width:25em;
    height:15em;
}
#Body {
    margin-top:10em;
    z-index:100;
    position:relative;
}
#main-nav {
    display:-webkit-flex;
    height:3em;
    padding:0 1em;
    -webkit-align-items:stretch;
    -webkit-justify-content:center;
}
#main-nav>a {
    display:-webkit-flex;
    -webkit-align-items:center;
    -webkit-justify-content:center;
    -webkit-flex:1 0 0;
    background-color:rgb(175, 175, 175);
    box-shadow:rgba(0, 0, 0, 0.298039) 8px 0px 25px 2px;
}
#Content>.left>div:first-of-type {
    padding-left:3em;
}
#Content>.left>div:first-of-type {
    padding-top:1em;
    padding-bottom:1em;
    margin:1em 1em 0 1em;
}
#Content>.left>ul {
    margin:0 1em 1em 1em;
}
#Content>.left>ul>li {
    margin:0 1em 1em 0;
    padding:1em 1em 1em 2em;
}
#Content>.left>ul>li h2 {
    padding-bottom:.25em;
}
#Content {
    display:-webkit-flex;
    display:flex;
    flex-wrap:wrap;
    -webkit-flex-flow:row;
    -webkit-justify-content:center;
}
#Content>.left {
    -webkit-flex:2 0 0;
    flex:2 0 0;
    min-width:400px;
}
#Content>aside {
    -webkit-flex:1 0 0;
    -webkit-flex-flow:column nowrap;
    -webkit-justify-content:center;
    margin:1em 1em 1em 0;
}
#Content>aside>* {
    -webkit-flex:1 1 auto;
    padding:1em;
    box-shadow:lightgrey 0px 0px 3px 2px;
}
#Content>aside>a {
    display:block;
    margin:1em 0;
}
#Content>aside>div:first-of-type h4 {
    font-weight:bold;
    margin-bottom:.25em;
}
aside>.categories>ul>li {
    display:-webkit-flex;
    -webkit-flex-flow:row nowrap;
    -webkit-justify-content:flex-start;
}
aside>.categories>ul>li:nth-of-type(n+2) {
    margin-top:1em;
}
aside>.categories>ul>li>span:first-of-type {
    -webkit-flex:1 0 auto;
}
aside>.categories>ul>li>span:nth-child(2) {
    -webkit-flex:0 1 auto;
   ...