Welcome to part 3 of the series. You can find part-1 and part-2 here.

You can find the codepen used in this part here.

We will start with flex container property align-content. It basically aligns items across the cross-axis, when there are extra space.

Note: this property has no effect when there is only one line of flex items.

The basic HTML used is -

<div class=”container”>
<div class=”box box1">1</div>
<div class=”box box2">2</div>
<div class=”box box3">3</div>
<div class=”box box4">4</div>
<div class=”box box5">5</div>
<div class=”box box6">6</div>
<div class=”box box7">7</div>
<div class=”box box8">8</div>
<div class=”box box9">9</div>
<div class=”box box10">10</div>
</div>

And the basic CSS used is -

/* Some default styles to make each box visible */
.box {
color:white;
font-size: 100px;
text-align: center;
text-shadow:4px 4px 0 rgba(0,0,0,0.1);
padding:10px;
}

/* Colours for each box */
.box1 { background:#1abc9c;}
.box2 { background:#3498db;}
.box3 { background:#9b59b6;}
.box4 { background:#34495e;}
.box5 { background:#f1c40f;}
.box6 { background:#e67e22;}
.box7 { background:#e74c3c;}
.box8 { background:#bdc3c7;}
.box9 { background:#2ecc71;}
.box10 { background:#16a085;}

/* We start writing out flexbox here. The above is just page setup */
.container {
display:flex;
border:10px solid mistyrose;
height:100vh;
}

.box {
width:33.333%;
}

This gives as the below -

The basics

You can read the rest of the blog from my site. The link for the same is below.

The last part of the series with the flex items properties is here.

UI Lead- ReactJS, JavaScript and everything in-between.