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 andstyled
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
Here are two common reasons that justify-content isn’t working:
1. Make sure display: flex
is added on the parent element.
2. Check the minimum width or height of the parent element. The parent width needs to be more than the children’s combined width if flex-direction: row
, or height needs to be more than the children’s combined height if flex-direction: column
. If there is no “extra room”, the content has no space to be justified to the start or end.
An easy way to add the justify-content CSS property to a component in MUI is to add display: flex
and justifyContent: flex-end
using the sx
prop.
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)
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>
</>
);
}