First, we'll look at a new page—flexbox.html. As you might have guessed, there's a <section> that will be the flex container, and 5 <div>'s which will be the flex items. :
<!--====================Flexbox Demo====================--><section class='flex-container'> <div class="flex-item flex-item1">item 1</div> <div class="flex-item flex-item2">item 2</div> <div class="flex-item flex-item3">item 3</div> <div class="flex-item flex-item4">item 4</div> <div class="flex-item flex-item5">item 5</div></section>
Here's the CSS we'll start with before adding flexbox properties:
/***************Flexbox demo***************/.flex-container { margin-top: 200px;}.flex-item { padding: 20px;}.flex-item1 { background: deeppink;}.flex-item2 ...
