CSS - Style a Website
This course covers the basics of styling a website using CSS. Work your way through the videos/articles and I'll teach you everything you need to know to style a basic website!

Flexbox

Lesson 13
Author : 🦒
Last Updated : October, 2017

Code

site.htmlCopy
<!-- classes 'box', 'box2' and 'container' (not shown) are used for styling the elements -->
<div class="flex-container container">
     <div class="box flex-item"><h1>1</h1></div>
     <div class="box2 flex-item"><h1>2</h1></div>
     <div class="box flex-item"><h1>3</h1></div>
     <div style="align-self:center;" class="box"><h1>4</h1></div>
     <div class="box flex-item"><h1>5</h1></div>
</div>
style.cssCopy
.flex-container {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     flex-wrap: wrap;
     align-items: center;
     align-content: space-between;
}