InlineCluster Component
Text in a paragraph is one of the best examples of "responsive by default." Text will wrap and cluster according to the text alignment. In this lesson, we will learn how to achieve that same effect using the InlineCluster primitive.
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.
This page is a preview of Composing Layouts in React