Basics of Flexbox — 4

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-

default settings

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

The Web Dev

This concludes the flexbox series. Hope you enjoyed it.