Image for post
Image for post
Photo by Goran Ivos on Unsplash

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

We will start looking at the flex items property from here onwards.

We will use this codepen for our project.

Let’s start with the property to align a single item ie align-self.

We will use this basic setup.

<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>

.container {
display:flex;
border:10px solid mistyrose;
height:100vh;
align-items: flex-start;
}

.box {
width:33.333%;
}

.box2{
padding-bottom: 200px;
}

.box6{
padding-bottom: 20px;
}

.box9{
padding-bottom: 300px;
}

It will show as below-

Image for post
Image for post
default settings

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

This concludes the flexbox series. Hope you enjoyed it.

Written by

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store