The Flex property is one of the best gifts on this green earth, eliminating the need to use float or positioning. Let's see how we can use it to create a simple responsive layout with wrap.

This is what we'll be building today:

ezgif-1-b493c0e465

Our HTML document

First we need to create a container, why? because the Flex property should be applied to parent container elements, this makes it available for us to apply flex properties for all its child elements inside it.

<section class="container">

  <div class="item"> 
    <h1> Flex 1 </h1>
  </div>

   <div class="item"> 
    <h2> Flex 2 </h2>
  </div>

   <div class="item"> 
    <h2> Flex 3 </h2>
  </div>

</section>

Our CSS

Let's start by applying the Flex property to our container and adding Flex wrap, why? because the default behavior of Flex items is to try to fit all into one horizontal line. By using wrap, we make it "wrap" the items as needed on other lines.

.container{
  display: flex;
  flex-wrap: wrap;
}

Now, let's also add the flex grow, flex shrink and flex basis properties, to our items, which will allow them to grow, shrink and occupy the necessary width according to the space available.

.item{
  flex: 3 3 150px; 
/* The first number is our flex-grow property */
/* The second number is our flex-shrink property */
/* The third number is our flex-basis */
}

Now to make things prettier, let's add more details like a new font, background color and some padding.

This is the font I used for this demo:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2 family=Oswald:wght@500&display=swap" rel="stylesheet">

Finished CSS and final result

Our finished CSS file should look like this:

.container{
  display: flex;
  flex-wrap: wrap;
}

h1, h2{
   background: rgb(26,41,128);
   background: linear-gradient(90deg, rgba(26,41,128,1) 0%,    rgba(23,192,204,1) 100%);
  color: #fff;
  padding: 5px;
  font-family: 'Oswald', sans-serif;
}

.item{
  flex: 3 3 150px;
  padding: 10px;
  text-align: center;
}