Basics of Flexbox — 4

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-

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.

--

--

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

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger