DEV Community

Cover image for Basics of Flexbox — 3
Nabendu
Nabendu

Posted on • Updated on • Originally published at thewebdev.tech

Basics of Flexbox — 3

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

We will require the flex-wrap property to spread it to multiple lines, which is required to use align-content. Let’s do it.

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

Which results in -

flex-wrap: wrap;flex-wrap: wrap;

Now, we are ready to use the align-content property. According to the CSS trick article , it contains the similar set of properties as justify-content. We will go through them one by one and it will be self-explanatory.

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

align-content: flex-start;align-content: flex-start;

.container {
 display:flex;
 border:10px solid mistyrose;
 height:100vh;
 flex-wrap: wrap;
 align-content: flex-end;
}

align-content: flex-end;align-content: flex-end;

.container {
 display:flex;
 border:10px solid mistyrose;
 height:100vh;
 flex-wrap: wrap;
 align-content: center;
}

align-content: center;align-content: center;

.container {
 display:flex;
 border:10px solid mistyrose;
 height:100vh;
 flex-wrap: wrap;
 align-content: space-between;
}

align-content: space-between;align-content: space-between;

.container {
 display:flex;
 border:10px solid mistyrose;
 height:100vh;
 flex-wrap: wrap;
 align-content: space-around;
}

align-content: space-around;align-content: space-around;

Top comments (0)