How to Use Flex to Make Your Website More Responsive

Modern website designs should be responsive to changes in content or browser size. You can achieve this using vanilla CSS, media queries, or flexbox.

Some flex properties such as flex-wrap or flex-grow can change the size or location of an element in visually appealing ways. This article shows examples of using the flex-grow, flex-shrink, flex-wrap, flex-flow, and order flex properties.

How to configure CSS Flex display

If you are unfamiliar with the basics of flexbox you can explore this CodePen Extract. It includes sample code for a simple flexbox setup. First, you’ll need to wrap the child elements under a parent div or “flex container”.

<div class="parent">
<div class="child-item"></div>
<div class="child-item"></div>
<div class="child-item"></div>
</div>

USE VIDEO OF THE DAY

Add the display: flexible property to the parent div.

.parent {
display: flex;
}

How to grow items in a container

the flex-growth The property allows child elements to expand to fill the available space in its parent div. This property allows you to specify the “ratio” of space that each item in the box can occupy.

To add flex-grow, add the CSS flex-grow property to each of the child elements.

<div class="parent">
<div style="background-color: red; flex-grow: 1"></div>
<div style="background-color: orange; flex-grow: 1"></div>
<div style="background-color: yellow; flex-grow: 1"></div>
<div style="background-color: green; flex-grow: 3"></div>
<div style="background-color: blue; flex-grow: 1"></div>
</div>


.parent {
width: 500px;
display: flex;
}

A flex-grow of 0 for each element means the boxes will not grow to fill their parent’s space. 0 is the default value for this property.

Flexible growth of 1 for each element will force all boxes to expand equally to fit the available space inside the parent.

If one of the elements had a larger flexible growth, for example:

<div style="background-color: green; flex-grow: 3"></div>

The green box will try to gain up to three times more space than the other boxes.

View the code for the flex-grow property in this CodePen Extract to see a working example.

How to collapse items in a container

In some cases, the width of the parent may decrease and the elements inside the parent will no longer fit inside. You can use the flex-retractable property of reducing the size of the boxes. This way they can stay confined inside the parent.

Flex-shrink allows you to specify a shrink ratio for each element.

Add the flex-shrink property to child div elements. Change the widths of the parent and children so that the elements don’t fit inside the container.

<div class="parent">
<div style="background-color: red; flex-shrink: 1"></div>
<div style="background-color: orange; flex-shrink: 1"></div>
<div style="background-color: yellow; flex-shrink: 1"></div>
<div style="background-color: green; flex-shrink: 2"></div>
<div style="background-color: blue; flex-shrink: 1"></div>
</div>

.parent {
width: 500px;
display: flex;
}
.parent div {
width: 150px;
height: 150px;
}

A flex-shrink of 1 for all elements means that all elements will shrink equally if the parent’s width is shrunk.

If one of the items had a larger flex-shrink, for example:

<div style="background-color: green; flex-shrink: 2"></div>

The green box will attempt to shrink twice as much as the other boxes.

View the code for the flex-shrink property in this CodePen Extract to see a working example.

How to move items to next row

the flex wrap The property lets you move items to the next line if they don’t fit within the width of the parent container. Here the elements do not shrink and you will be able to maintain the height and width of the elements.

Options for the flex-wrap property include:

flex-wrap: nowrap | wrap | wrap-reverse

Add the flex-wrap property to the parent flex container. Make sure the width of the container is small enough that it can’t fit the child elements inside. This will force all overflowing elements to a new line.


<div class="parent">
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="green"></div>
<div class="blue"></div>
</div>

.parent {
width: 300px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
}
.parent div {
width: 100px;
height: 100px;
}

The wrap value will position the elements starting at the top right of the container. The wrap-reverse value will reposition the elements to start at the bottom right of the container. When wrapping elements, it will push the elements to a new line above instead of below.

If you specify a height on the parent container, the container will add spacing between rows of items.

If you want to remove this spacing, but keep the height of the parent div, use the align-content property. Specify the align-content property as “flex-start” in the parent div:

.parent { 
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}

The align-content property is one of several primary flexbox properties that allow you to control alignment.

Show code of flex-wrap property in this CodePen Extract to see some examples.

How to push items to next column

If you are using a different layout (such as a column) and still need to wrap elements, you can use the flexible flow goods. This flex property is a combination of the flex-wrap and flex-direction properties.

Examples of option combinations you can use for the flex-flow property:

flex-wrap: row nowrap | column nowrap | row wrap | column wrap | row wrap-reverse | column wrap-reverse

This property works similar to the flex-wrap property above. Add flex-flow to the parent flex container. Make sure the width of the parent container is small enough to force the child elements to wrap:

.parent {
width: 300px;
border: 1px solid black;
display: flex;
flex-flow: column wrap;
}
.parent div {
width: 100px;
height: 100px;
}

Elements will wrap in the specified direction (row or column).

View the code for the flex-flow property in this CodePen Extract to see some examples.

How to change the order of elements

If you need to rearrange the elements on the page due to any kind of dynamic data, you can use the Ordered flexible ownership. This property allows you to specify the order in which each element appears.

Numbers don’t have to start from 1. You can use any numbers and ranges, and the order property will order HTML elements from lowest to highest.

Add the order property to each of the elements inside the parent flex container:

<div class="parent">
<div class="red" style="order: 2"></div>
<div class="orange" style="order: 1"></div>
<div class="yellow" style="order: 5"></div>
<div class="green" style="order: 4"></div>
<div class="blue" style="order: 3"></div>
</div>

In this case, the orange box will be on the far right, followed by the red, blue, green, and then yellow boxes.

Show command property code in this CodePen Extract to see some examples.

Experiment with more CSS properties on your website

You can use these flexible properties to make your website more responsive. This includes using the flex-grow, flex-shrink, flex-wrap, flex-flow, and order flex properties.

You can also read more about flexible properties to help you align HTML elements on your website.


Macbook open to website listing products on square tiles

How to use Flex to align HTML elements

Read more


About the Author

Daniel L. Vasquez