HTML
<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>
LESS
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;
}
1 Response