The great thing about lines of text on the web is that they are responsive by default. When there is no more room in the inline direction, the words will wrap to the following line, clustering according to the justification of the text.

The goal of the primitive that we will learn in this lesson is to do exactly that, put elements inline and cluster them according to the justification set to the primitive.

The problem: the Menu Bar#

In this lesson, we are going to build out the following widget:

This widget will have a list of links that are consistently spaced and vertically aligned. When the inline space is too small to fit them on a single row, the elements need to wrap, keeping a consistent space between them.

The Solution#

Once again, let's start with the basic markup, and you can follow along by going to the codesandbox.io starter project for this lesson:

import React from "react";

import Menu from "./Menu";

export default function MenuBar() {

  return (

    <Menu>

      <div>

        <span>Product</span>

        <span>Features</span>

        <span>Marketplace</span>

        <span>Company</span>

        <span>Log in</span>

      </div>

    </Menu>

  );

}

And this is how it looks:

Let's start by getting our items in the correct location in the MenuBar:

const InlineCluster = styled.div`

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  align-items: center;

`;

In the first two lines, we set the display to flex, putting all items inline in a row. We are also setting the flex-wrap to wrap so that the items will wrap to a new row when it runs out of room in the inline direction.

The following two lines allow us to position the items. justify-content lets you justify your items on the main axis, which is horizontally in our context. It might help to think of setting the text justification in a Word or Google doc. Setting it to flex-end moves it to the end of the inline row.