How to Use Flex to Make Your Website More Responsive

CSS flexbox brings a wealth of options for your web designs. Learn how to use it to create scalable, flexible layouts.

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

Certain flex properties such as flex-wrap or flex-grow can change the size or location of an element in a visually appealing way. This article will go through examples of how you can use the flex-grow, flex-shrink, flex-wrap, flex-flow, and order flex properties.

How to Set Up CSS Flex Display

If you're unfamiliar with the basics of flexbox, you can explore this CodePen snippet. It includes example code for a simple flexbox setup. First, you will need to wrap the child items 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>

Add the display: flex property to the parent div.

.parent {
  display: flex;
}

How to Grow Items Within a Container

The flex-grow property allows the child items to expand to fill the space available in its parent div. This property allows you to specify the "ratio" amount of space that each box item can take up.

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

<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 item means that the boxes will not expand to fill the space of their parent. 0 is the default value for this property.

A flex-grow of 1 for each item will force all boxes to expand equally to fit the available space inside the parent.

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

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

The green box will attempt to gain up to three times the amount of space as the other boxes.

How to Shrink Items Within a Container

In some cases, the parent's width might shrink and the items inside the parent will no longer fit inside. You can use the flex-shrink property to shrink the size of the boxes. This way, they can stay contained inside the parent.

Flex-shrink allows you to specify a ratio for how much each item should shrink.

Add the flex-shrink property to the child div items. Change the widths of the parent and children so that the items do not fit into 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 items means that all items will shrink equally if the parent's width is reduced.

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.

How to Push Items to the Next Row

The flex-wrap property allows you to push items to the next line if they do not fit within the width of the parent container. Here, the items do not shrink, and you will be able to preserve the height and width of the items.

Options for the flex-wrap property include:

flex-wrap: nowrap | wrap | wrap-reverse

Add the flex-wrap property to the parent flex-container. Ensure that the width of the container is small enough, so it does not fit the child items inside it. This will force any overflowing items onto a new row.

<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 items starting in the top-right of the container. The wrap-reverse value will reposition the items to start at the bottom-right of the container. When wrapping the items, it will push items on a new row above instead of below.

If you specify a height on the parent container, the container will add spacing between the 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 core flexbox properties that allow you to control alignment.

How to Push Items to the Next Column

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

Example option combinations that you can use for the flex-flow property include:

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

This property works similarly to the flex-wrap property above. Add flex-flow to the parent flex container. Ensure the parent container's width is small enough to force the child items to wrap:

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

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

How to Change the Order of Items

If you needed to re-arrange the items on the page due to any sort of dynamic data, you can use the order flex property. This property allows you to specify the order that each item appears.

The numbers do not necessarily have to start from 1. You can use any numbers and intervals, and the order property will order the HTML elements from lowest to highest.

Add the order property to each of the items 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 right-most, followed by the red, blue, green, then yellow boxes.

Experimenting With More CSS Properties in Your Website

You can use these flex 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 learn about more flex properties to help you align the HTML elements on your website.