Simple flexbox tutorial

Tshilidzi Rambuda — Fri, 10 Dec 2021 11:41:19 +0000

How to style multiple blocks of different colors in one single row and get what we call a color palette out of it?

In this tutorial I will show you how you can style multiple blocks of different colors and make a color palette using css property flexbox.

Fist we will start by creating a div container that will contain five divs with different colors.

This is how our html will look like

<div class="container">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>

And this is the css code below

.container{
  width:100%;
  max-width:1000px;
  height: 200px;
  display: flex;
  flex-direction:row;
  justify-content:space-evenly;
}
.container > div{
  width:calc(100%/5);
  height:100%;
}
.container > div:nth-child(1){
  Background:blue;
}
.container > div:nth-child(2){
  Background:lightblue;
}
.container > div:nth-child(3){
  Background:red;
}
.container > div:nth-child(4){
  Background:lightred;
}
.container > div:nth-child(5){
  Background:pink;
}

And that is how you create a css flexbox color palette guys :)

DEV Community: Tshilidzi Rambuda

Simple flexbox tutorial

This is how our html will look like

And this is the css code below