Flexbox Layout responsive

<header> <a href="#"><img src="https://codepad.co/img/icn_logo.png"></a> <nav> <ul> <li><a href="#">Work</a></li> <li><a href="#">About</a></li> </ul> </nav> </header> <main> <section> <article> <a href="#"> <div class="content"> <h1>Justify-content</h1> <p>This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up. </p> </div> </a> </article> <article> <a href="#"> <div class="image"></div> <div class="content"> <h1>Flexbox!</h1> <p>This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children. </p> </div> </a> </article> </section> <aside> <article> <a href="#"> <h1>Properties for the Parent</h1> <p>Note that CSS columns have no effect on a flex container.</p> </a> </article> <article> <a href="#"> <h1>Flex items</h1> <p>Negative numbers are invalid.</p> </a> </article> </aside> </main> <footer>© 2016</footer>
header { .flex; .justify-space-between; .align-items-center; background:orange; border-bottom: 5px solid #eee; padding: 2em; a { .flex; .align-items-center; img { height: 1em; width: auto; } } nav { ul { margin: 0; padding: 0; list-style-type: none; .flex-inline; li { margin-left:1em; a { color: white; text-decoration: none; text-transform: uppercase; font-size: .7em; font-weight: light; .transition(.4s); padding: .5em .5em .3em.5em; border-radius:1px; &:hover { background: darken(orange, 10%); } } } } } } main { .flex; .flex-wrap; section { padding: .5em; background: #fafafa; .flex-item(2,1,300px); article { margin: 1em; border: 1px solid #eee; background-color: white; border-radius: 3px; .transition; &:hover { background-color:#fafafa; } a { color: #444; text-decoration: none; .flex; .image { background-color:orange; border-top-left-radius: 3px; border-bottom-left-radius: 3px; .flex-item(1,1,50px); } .content { padding: .5em; .flex-item(1,1,300px); h1 { font-size: 1.4em; margin: 0; color: #555; } p { margin: 0; margin-top:.3em; color: #888; font-weight: light; } } } } } aside { padding: 2em; background: #eee; .flex-item(1,1,180px); article { padding: .3em; border-radius: 3px; margin-bottom: .2em; .transition; &:hover { background-color: #fafafa; } a { color: #555; text-decoration: none; h1 { margin: 0; font-size: 1em; } p { font-size: .8em; color: #999; margin: .1em; } } } } } footer { padding:2em; font-size: .8em; color: #aaa; border-top: 5px solid #eee; } .flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .flex-item(@grow: 1, @shrink: 1, @basis: auto) { -webkit-box-flex: @grow; -ms-flex: @grow @shrink @basis; flex: @grow @shrink @basis; } .flex-i { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .flex-inline { display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex; } .flex-auto { -webkit-box-flex: 1;-ms-flex: auto;flex: auto; } .flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-direction-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .justify-space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .justify-flex-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .align-items-center { -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .align-items-start { -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: start; align-items: start; } .transition(@time: .2s) { -webkit-transition: all @time ease-in-out; -moz-transition: all @time ease-in-out; -ms-transition: all @time ease-in-out; -o-transition: all @time ease-in-out; transition: all @time ease-in-out; }
Expand for more options Login