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

Flexbox

Lesson 13
Author : Mike Dane
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; }