How To Use The Flex CSS Property

Brian Mayrose
Sep 21, 2018 · 6 min read

The CSS flex property is the simplest way to achieve a responsive layout for your HTML elements. Bootstrap’s row and column design is a close rival in simplicity and design but uses a separate library or more commonly a content delivery network while flex is built into the clients' browser. Here we will go over the basics you need to know when using flex.

First, let's start with an example not using flex. See it here! We will start with a div with the class “container”. Inside of this div, we will have three divs with the classes “box_1”, “box_2”, and “box_3”. Some content has been added also for a better demonstration:

<div class="container">
<div class="box_1">
<h2>This is box 1</h2>
<p>
Lorem Ipsum is simply dummy text of the printing
</p>
</div>
<div class="box_2">
<h2>This is box 2</h2>
<p>
Lorem Ipsum is simply dummy text of the printing
</p>
<p>
Lorem Ipsum is simply dummy text of the printing
</p>
</div>
<div class="box_3">
<h2>This is box 3</h2>
<p>
Lorem Ipsum is simply dummy text of the printing
</p>
</div>
</div>

Let's add a little style to these divs. A different background color will help make each part standout. In a separate style sheet add some padding, margin and background color to each div:

.container{
background: rgba(0, 0, 220, 0.2);
border-radius: 7px;
padding: 5px;
}
.box_1{
background-color: rgba(255, 40, 0, 0.5);
height: auto;
width: 300px;
margin: 5px;
padding: 5px;
padding-bottom: 5px;
border-radius: 7px;
}
.box_2{
background-color: rgba(255, 0, 220, 0.5);
height: auto;
width: 300px;
margin: 5px;
padding: 5px;
padding-bottom: 5px;
border-radius: 7px;
}
.box_3{
background-color: rgba(0, 0, 220, 0.5);
height: auto;
width: 300px;
margin: 5px;
padding: 5px;
padding-bottom: 5px;
border-radius: 7px;
}

See a live example Here!

Now to add the flex property. in the container definition simply set display to flex:

.container{
display: flex;
background: rgba(0, 0, 220, 0.2);
border-radius: 7px;
}

Save your CSS file and refresh your browser. The divs inside the container will now be inline horizontally with each other.

See a live demo Here!

You can use the property flex-direction when display is set to flex on the parent element to change how the elements are lined up. The options for flex-direction are: row, row-reverse,column, and column-reverse.

When the flex property is used for the parent div, new CSS properties are opened up for the child elements. One of these properties is “item oreder”.

when added to items within a flex container, the order in which items are displayed will correspond to number value set by the “item order” property. The lower the number starting with 1, the higher the priority and it will be the first to be displayed. Lets give this a try.

In the CSS file create three new class definition, item_1, item_2, and item_3. In each definition set the item_order to each a different number, 1 through 3.

.item_1 {
order: 1; /* default is 0 */
}
.item_2 {
order: 3;
}
.item_3 {
order: 1;
}

Add one of these classes to each of our three divs:

<div class="box_1 item_1">
<h2>This is box 1 with an order number of 1</h2>
<p>box 1</p>
<p>
Lorem Ipsum is simply dummy text of the printing
</p>
</div>
<div class="box_2 item_2">
<h2>This is box 2 with an order number of 3</h2>
<p>box 2</p>
<p>
Lorem Ipsum is simply dummy text of the printing
</div>
<div class="box_3 item_3">
<h2>This is box 3 with an order number of 1</h2>
<p>box 3</p>
<p>
Lorem Ipsum is simply dummy text of the printing
</div>

Save your files and refresh your browser. The order of the divs will have changed to correspond with the item order value.

We can now change just the order number to get different order for the divs:

Now lets explore a great property that works when display is set to flex, the property is flex wrap.

Here is a live example of a flex container with a lot of content, but does not have flex wrap initiated: live example

flex container without flex wrap

Now if we add flex wrap to the container we will see things become more organized.

.container{
display: flex;
flex-wrap: wrap;
background: rgba(0, 0, 220, 0.3);
border-radius: 7px;
}

Refresh the browser after saving your CSS file and the page should now look like this!

flex container with the flex wrap property defined

You can also wrap-reverse as another option for flex-wrap which reverses the order of the elements.

Now that we have our elements moving to another line in a responsive manner lets add some intuitive spacing between the elements by adding the justify-content property to the parent container.

.container{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background: rgba(0, 0, 220, 0.2);
}

The options for justify-content are flex-start, flex-end, center, space-between, space-around, and space-evenly. You can see an example of space-around Here!

space-around justify property
space-between justify property

The justify property simplifies spacing of elements tremendously and is great for gallery situations. Another great property to use as a spacing solution is the grow property. Unlike the justify property the grow property is applied to the child element. I like to add it to the item_order class we created:

.item_1 {
order: 1; /* default is 0 */
flex-grow: 1;
}
.item_2 {
order: 1; /* default is 0 */
flex-grow: 4;
}
.item_3 {
order: 1; /* default is 0 */
flex-grow: 5;
}

Save and reload your page. Live example Here!

The number associated to the element will decide how much space it will take up. Notice the divs on the bottom. They each have a different grow value. Box 3 has the largest grow value while Box 1 has the lowest.

Flex is a great addition to modern browsers and should be used in place of other more complicated techniques. There are a few more properties to use with flex that I did not go over here, but you can check them out Here.

Data Driven Investor

from confusion to clarity not insanity

Brian Mayrose

Written by

Data Driven Investor

from confusion to clarity not insanity

More From Medium

More from Data Driven Investor

More from Data Driven Investor

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade