Mockupless

flex: 1

Let’s create a simplistic toolbar layout:

Turning the toolbar into a flex parent container stacks the items horizontally and aligns them to the left by default:

<div style="display: flex;">
  <div>AppName</div>
  <div>Newsfeed</div>
  <div>Explore</div>
  <div>Profile</div>
</div>

There’s always a number of ways to achieve something in CSS, and every solution has its advantages. Since iterative design is at the core of the prototyping workflow, the best solution is the one that allows you to change layouts quicker. There’s a property, flex: 1, that tells a child container to take all space inside the parent container that is not taken by other children. You will be surprised by how many applications this property has, but first, let’s apply it to the first child container from the example above:

<div style="display: flex;">
  <div style="flex: 1;">AppName</div>
  <div>Newsfeed</div>
  <div>Explore</div>
  <div>Profile</div>
</div>

With flex: 1, the first container pushes other items to the right by taking all available horizontal space. The effect is easier to see if you add a background color to the container:

Open the prototype and try resizing the browser window. You should see that the container automatically adjusts its width and always takes as much space as it can.

An even more flexible approach is to create a separate empty container with flex: 1, instead of applying the property to the first container:

<div style="display: flex;">
  <div>AppName</div>
  <div style="flex: 1;"></div>
  <div>Newsfeed</div>
  <div>Explore</div>
  <div>Profile</div>
</div>

A background color is added to highlight the flex: 1 child:

This approach gives you the freedom of distributing the space around by moving the flex: 1 container. For example, you decide to move some items next to the title, and keep Profile on the right. To implement this, you just move the flex: 1 container to where the space should be:

<div style="display: flex;">
  <div>AppName</div>
  <div>Newsfeed</div>
  <div>Explore</div>
  <div style="flex: 1;"></div>
  <div>Profile</div>
</div>

Multiple flex: 1 containers

If you apply flex: 1 to two or more child containers, they will share the available space evenly. This feature can be used, for example, to center a container:

If you apply flex: 1 and text-align: center to the middle container, the label will not be centered, because the width of controls on left is not equal to the width of controls on the right. Below, the flex: 1 container is highlighted:

Instead, you can put the controls in two flex: 1 containers and they will center the label by sharing the space evenly:


 





 






<div style="display: flex;">
  <div style="flex: 1;">
    <button>Back</button>
  </div>
  <div>
    Steve Allen
  </div>
  <div style="flex: 1;">
    <button>Video</button>
    <button>Audio</button>
    <button>Info</button>
  </div>
</div>

The flex: 1 containers are highlighted with a background color:

Practice

3 columns

Create a wireframe of a three-column layout, where the third column has flexible width:

  1. Create a new pen. In CSS, apply margin: 0 to the body tag.
  2. Create a flex parent container with light gray background.
  3. Make it full-screen using height: 100vh.
  4. Add three child containers with different backgrounds.
  5. Apply fixed widths to the first two children.
  6. Apply flex: 1 to the third column.
  7. Try resizing the Preview. The first two columns should always stay the same, and the third must adjust to the width of the viewport.

Centered title

Create a header with a centered title:

  1. Create a new pen. In CSS, apply margin: 0 to the body tag.
  2. In HTML, create a flex parent container with a bottom border and some paddings.
  3. Create three child containers.
  4. Enter a title of a website in the second container.
  5. Center the second container by applying flex: 1 to the first and the third containers.
  6. Add button tags to the first and second container to create the navigation.
  7. Apply text-align: right to the third container to push the buttons to the right.
  8. Apply align-items: center to the flex parent container to align the title and the buttons horizontally.
  9. In CSS, overwrite the default styles of the button tag using background-color: transparent, border: none and other properties.

← Nesting and overflow →