How to use Justify-Content in MUI (5 Examples!)

The justify-content CSS property is the most commonly used flexbox modifier, according to my analysis of search trends. In MUI, we usually see camel-case justifyContent syntax because MUI often uses JavaScript to apply styling.

To paraphrase MDN, justify-content controls space between and around child elements along the main axis of a container. The “main axis” of a div with display: flex is the horizontal “row” direction. However, in MUI the default flex direction for Stack and other flex components is the vertical “column” direction.

We’ll create five examples:

• Justify Content on an MUI Box component
• Justify Content on an MUI Stack component
• Justify Content using the sx prop and styled API
• Justify Content with a div in an MUI project (the div is wrapping the other four examples)

The Stack component has a special justifyContent prop for quicky setting justify-content values. However, you can also apply the justify-content through traditional CSS. The div has to use inline styling or class styling to get justify-content applied.

Full code and related posts are in the Resources section.

MUI Box with Justify Content

The MUI Box is a useful wrapping component that renders simply as a div. I added some default minimum sizing and display: flex.

<Box sx={{...defaultStyling, display: 'flex'}}><Item>1</Item><Item>2</Item><Item>3</Item></Box>

We can see from the DOM screenshot below that there is no flex-direction or justify-content added. The default values for these are row and flex-start, which is why the content is aligned in the top left along the horizontal axis.

If you want to see the Box with justify content applied, try adding one of the following values to the sx prop:

• justifyContent: 'flex-end'
• justifyContent: 'space-around'
• justifyContent: 'space-between'

If you are having trouble getting your content aligned with justify content, make sure the minimum width or height of the parent is greater than the combined width or height of the children.

MUI Stack with Justify Content

The MUI Stack component has special props for many flexbox properties. Flex is applied by default, and flex-direction is column by default (I’m not sure why the MUI team chose this when the “web standard” is row).

<Stack sx={defaultStyling} justifyContent="flex-end"><Item>1</Item><Item>2</Item><Item>3</Item></Stack>

I added minimum height and width, plus set justifyContent to “flex-end”. Since the flex direction is row, this results in children being justified to the bottom of the Stack.

Justify Content with MUI’s SX Prop

We can use the sx prop to add flex and justifyContent to any wrapping MUI component. In a previous example we added it to the Box component.

Here I am adding it to the Container:

<Container sx={{...defaultStyling, display: 'flex', justifyContent:"flex-end"}}><Item>1</Item><Item>2</Item><Item>3</Item></Container>

Notice the dev tools screenshot below how the values in the sx prop are applied. The justify-content value is added to the MuiContainer-root class, which was generated by default.

Justify Content with MUI’s Styled API

The styled API is intended for creating reusable components. It can be used to add justify-content styling to a wrapping component, just like sx. If desired, you can use CSS syntax instead of JS syntax.

import { styled } from "@mui/material/styles";

const StyledContainer = styled(Container)(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-between'  
}));

//JSX
<StyledContainer><Item>1</Item><Item>2</Item><Item>3</Item></StyledContainer>

In this example, I added justify-content: space-between with flex-direction: column. This is going to use all possible vertical space, and add even spacing between each component.

Notice once again that the styling was added to the MuiContainer-root class, just like with the sx prop.

Justify Content in a div in MUI

The four examples above are wrapped in a div that has it’s own flex style applied. When using ‘regular’ React components, we can’t use MUI’s sx prop. We either need to use className or inline styling:

<div style={{display: 'flex', padding: '8px', backgroundColor: 'goldenrod'}}>...</div>

In this example I did not directly add justifyContent. That means the div will have a default value of justifyContent: flex-start. As usual, all possible justify content values can be applied to the div.

FAQs

Resources

Here are related posts I’ve written:

• The Complete Guide to MUI Grid Item Alignment
• How to Align Buttons in Material-UI Using the Box Component
• The Ultimate Guide to the New MUI Stack Component
• How to Align MUI Typography (Vertically/Center/Right/Left)

MUI Stack Docs

Full React code for this tutorial:

import * as React from "react";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Container from "@mui/material/Container";
import { styled } from "@mui/material/styles";

const Item = styled(Paper)(({ theme }) => ({
  ...theme.typography.body2,
  padding: theme.spacing(1),
  margin: theme.spacing(1),
  textAlign: "center",
  color: theme.palette.text.secondary,
  width: 25,
  height: 25
}));

const StyledContainer = styled(Container)(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-between'  
}));

const defaultStyling = {
  minHeight: 250,
  minWidth: 250,
  borderRight: '1px solid blue'
}

export default function MUIJustifyContent() {
  return (
    <>
      <div style={{display: 'flex', padding: '8px', backgroundColor: 'goldenrod'}}>
        <Box sx={{...defaultStyling, display: 'flex', justifyContent: 'flex-start'}}><Item>1</Item><Item>2</Item><Item>3</Item></Box>
        <Stack sx={defaultStyling} justifyContent="flex-end"><Item>1</Item><Item>2</Item><Item>3</Item></Stack>
        <Container sx={{...defaultStyling, display: 'flex', justifyContent:"flex-end"}}><Item>1</Item><Item>2</Item><Item>3</Item></Container>
        <StyledContainer><Item>1</Item><Item>2</Item><Item>3</Item></StyledContainer>
      </div>
    </>
  );
}