Basics of Flexbox — 4

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

Now the align-self allows to overwrite the alignment along the cross axis for an individual flex item. We will see all main three vales in below example.

.box2{
 padding-bottom: 200px; 
 align-self: flex-end;
}
.box6{
 padding-bottom: 20px; 
 align-self: flex-start;
}
.box9{
 padding-bottom: 300px; 
 align-self: center;
}

align-self

Now we will see the flex items property flex. This is actually a shorthand for flex-grow, flex-shrink and flex-basis combined, which we will see later.

The codepen for the same is here

The basic setup is -

<div class=”container”>
 <div class=”box box1">one 😎</div>
 <div class=”box box2">two 🍕</div>
 <div class=”box box3">three 🍟</div>
 <div class=”box box4">four 👍</div>
 <div class=”box box5">five 👀</div>
 <div class=”box box6">six 💩</div>
 </div>
.box {
 color:white;
 font-size: 50px;
 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;}
.container {
 display:flex;
}

The output is -

default setup

Now we can clearly, see there is some free space above. And the flex property decides how this free space will be distribute. Like if we give flex:1 to all items, the free space will be distribute equally among all flex-items.

.container {
 display:flex;
}
.box{
 flex:1;
}

flex:1

If we give flex:2 to a single item in above scenario, it will take twice the free space as others.

.container {
 display:flex;
}
.box{
 flex:1;
}
.box2{
 flex:2;
}

flex:2 to item2

We will learn the individual properties of flex-grow, flex-shrink and flex-basis next.

For this we will be using this codepen as basis.

<div class=”container”>
 <div class=”box box1">one 😎</div>
 <div class=”box box2">two 🍕</div>
 </div>
.box {
 color:white;
 font-size: 50px;
 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;}
/* We start writing out flexbox here. The above is just page setup */
.container {
 display:flex;
}
.box1{
 flex:1;
}
.box2{
 flex:1 1 0;
}

Which will result in -

basics

flex: 1 is shorthand for flex-grow flex-shrink flex-basis
So, as above we can write flex: 1 1 0

It means flex-grow: 1, flex-shrink: 1 and flex-basis: 0. We will learn more about them now.

flex-basis means the default size of the element before remaining space is distributed. If we give it alone, it will only take the pixels we give it. like below.

.box1{
 flex-basis: 400px;
}
.box2{
 flex-basis: 300px;
}

flex-basis

flex-grow means how to distribute the free space between items. Like in above situation we have a lot of free space.

.box1{
 flex-basis: 300px;
 flex-grow: 2; 
}
.box2{
 flex-basis: 300px;
 flex-grow: 1;
}

So, it means box1 will take twice the available free space and box2 will take in comparison with box1 single free space.

flex-grow

flex-shrink means the ability of item to shrink in the proportion when less space is there. Will come into play when we go to mobile layout

.box1{
 flex-basis: 300px;
 flex-grow: 2; 
 flex-shrink: 5;
}
.box2{
 flex-basis: 300px;
 flex-grow: 1;
 flex-shrink: 1;
}

The above means, when there is less space then shrink box1 5 times more then box2

flex-shrink

This concludes the flexbox series. Hope you enjoyed it.