The Complete Guide to MUI Flex: 3 Examples!

Using display: flex on wrapping components in MUI provides robust one-dimensional layout options. A common method for adding flex is through the sx prop. However, some components are set to flex by default.

In this tutorial we will explore components that have display: flex by default, add flex to wrappers that don’t start with flex, and create a custom component that always has flex.

MUI Flex in the Stack Component: Built-in Flex

The MUI team recognized that some components almost always require flex, so they made display: flex the default style for these components. Here’s a list of flex components:

• Stack
• FormGroup
• RadioGroup
• Grid with prop container: true

Interestingly, the default flex direction is not the same for all these components. The Stack, FormGroup, and RadioGroup have default flex direction of column, while the Grid has a default of row (which is the CSS default).

Here is a simple code example of the Stack with flex:

<Stack>
  <Contents>1</Contents>
  <Contents>2</Contents>
  <Contents>3</Contents>
</Stack>

Notice that display and flex direction are set directly and with webkit values as backup. We can see that these styles are directly set in the .MuiStack-root class.

I also added some styling for size and background color. Use flex-grow and flex-shrink to control sizing of contents inside a flex box.

MUI Flex in the Box Component: Add Flex with SX Prop

Most components do not have display: flex by default. However, there are many wrapper components that often need flex. In these cases, we add flex using the sx prop. Here’s an example:

<Box sx={{display: "flex"}}>
  <Contents>1</Contents>
  <Contents>2</Contents>
  <Contents>3</Contents>
</Box>

Notice that once again webkit backup styling has been added. However, we don’t see a flex direction. Since the default flex direction is row, we see the Contents in a horizontal alignment.

Simply add flexDirection: 'column' (or ‘row-reverse’, ‘column-reverse’) to the sx prop to change flex direction.

Consider using the justifyContent and alignItems values to align content.

MUI Flex in a Custom Component: Add Flex with Styled Components

With the styled API, we can create our own MUI components that have flex enabled by default. We can also give these components the ability to receive a flex direction prop.

Here’s an example of creating a Styled Component with flex:

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

type StyledFlexContainerProps = {
  direction: "row" | "column" | "row-reverse" | "column-reverse"
}

export const StyledFlexContainer = styled(Container, {
  name: "StyledFlexContainer",
  slot: "Wrapper"
}
)<StyledFlexContainerProps>((props) => ({
  display: "flex",
  flexDirection: props.direction
}));

First I created a type for my StyledFlexContainer so that it knew what kind of props to expect.

Next I used the styled syntax to extend a Container to become a StyledFlexContainer. The name and slot are styled API options. The display and flexDirection values are CSS values that style the StyledFlexContainer. Notice that flexDirection uses the custom direction value on the props.

Here’s how we implement an instance of the StyledFlexContainer:

<StyledFlexContainer direction="row-reverse">
  <Contents>1</Contents>
  <Contents>2</Contents>
  <Contents>3</Contents>
</StyledFlexContainer>

In the DOM we can see the row-reverse value I passed in through the custom prop.

Here’s a link to MUI Flex Docs.