This video is available to students only

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.

Example of text justification

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:

Menu Bar mockup wide

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.

Menu Bar mockup narrow

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:

And this is how it looks:

Menu Bar step 0

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

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

Start a new discussion. All notification go to the author.