React MUI Flexbox
Last Updated :
27 Sep, 2022
In this article, we will learn about the flexbox system in MUI. Material UI is an open-source design framework that showcases different components made in react. It is developed and maintained by Google since 2014.
What is flexbox?
Flexbox is a CSS 3 web layout model that allows us to responsively align elements within a container depending on viewport size.
Syntax:
display: flex
Creating React Application And Installing Module
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @mui/material
npm install @mui/system
npm install @emotion/react
npm install @emotion/styled
Project Structure: It will look like the following.
Example: Now, let’s create a simple application with 3 Boxes. Change your App.js like below:
App.js
import * as React from 'react';
import Box from '@mui/material/Box';
function Item(props) {
const { sx, ...other } = props;
return (
<Box
sx={{
p: 1,
m: 1,
bgcolor: (theme) =>
(theme.palette.mode === 'dark' ? '#101010' : 'grey.100'),
color: (theme) =>
(theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
border: '1px solid',
borderColor: (theme) =>
theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...sx,
}}
{...other}
/>
);
}
export default function App() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
</div>
);
}
|
Steps to run the application: Write the below code in the terminal to run the application:
npm start
Output:
Now, let’s change the properties of the parent element:
1. display: flex | inline-flex
App.js
import * as React from 'react';
import Box from '@mui/material/Box';
export default function App() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{
display: 'flex',
p: 1,
m: 1,
bgcolor: '#101010',
color: 'grey.300',
border: '1px solid',
borderColor: 'grey.800',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
}}
>
{"I'm a flexbox container that uses flex!"}
</Box>
<Box
sx={{
display: 'inline-flex',
p: 1,
m: 1,
bgcolor: '#101010',
color: 'grey.300',
border: '1px solid',
borderColor: 'grey.800',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
}}
>
{"I'm a flexbox container that uses flex!"}
</Box>
</div>
);
}
|
Output:
2. flex-direction: row | row-reverse | column | column-reverse
App.js
import * as React from 'react';
import Box from '@mui/material/Box';
function Item(props) {
const { sx, ...other } = props;
return (
<Box
sx={{
display: 'flex',
p: 1,
m: 1,
bgcolor: '#101010',
color: 'grey.300',
border: '1px solid',
borderColor: 'grey.800',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...sx,
}}
{...other}
/>
);
}
export default function App() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
flexDirection: 'row-reverse',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'flex-start',
flexDirection: 'column',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
flexDirection: 'column-reverse',
alignItems: 'flex-start',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
</div>
);
}
|
Output:
3. flex-wrap: wrap | no-wrap | wrap-reverse
App.js
import * as React from 'react';
import Box from '@mui/material/Box';
function Item(props) {
const { sx, ...other } = props;
return (
<Box
sx={{
display: 'flex',
p: 1,
m: 1,
bgcolor: '#101010',
color: 'grey.300',
border: '1px solid',
borderColor: 'grey.800',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...sx,
}}
{...other}
/>
);
}
export default function App() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{
display: 'flex',
flexWrap: 'nowrap',
p: 1,
m: 1,
bgcolor: 'background.paper',
maxWidth: 300,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
<Item>Item 4</Item>
<Item>Item 5</Item>
<Item>Item 6</Item>
</Box>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
p: 1,
m: 1,
bgcolor: 'background.paper',
maxWidth: 300,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
<Item>Item 4</Item>
<Item>Item 5</Item>
<Item>Item 6</Item>
</Box>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap-reverse',
p: 1,
m: 1,
bgcolor: 'background.paper',
maxWidth: 300,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
<Item>Item 4</Item>
<Item>Item 5</Item>
<Item>Item 6</Item>
</Box>
</div>
);
}
|
Output:
4. justify-content: flex-start | flex-end | center | space-around | space-evenly | space-between
App.js
import * as React from 'react';
import Box from '@mui/material/Box';
function Item(props) {
const { sx, ...other } = props;
return (
<Box
sx={{
display: 'flex',
p: 1,
m: 1,
bgcolor: '#101010',
color: 'grey.300',
border: '1px solid',
borderColor: 'grey.800',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...sx,
}}
{...other}
/>
);
}
export default function App() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{
display: 'flex',
justifyContent: 'flex-start',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'flex-end',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'center',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'space-around',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'space-evenly',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
</div>
);
}
|
Output:
5. align-items: flex-start | flex-end | center | stretch | baseline
App.js
import * as React from 'react';
import Box from '@mui/material/Box';
function Item(props) {
const { sx, ...other } = props;
return (
<Box
sx={{
display: 'flex',
p: 1,
m: 1,
bgcolor: '#101010',
color: 'grey.300',
border: '1px solid',
borderColor: 'grey.800',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...sx,
}}
{...other}
/>
);
}
export default function App() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{
display: 'flex',
alignItems: 'flex-start',
p: 1,
m: 1,
bgcolor: 'background.paper',
height: 100,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'flex-end',
p: 1,
m: 1,
bgcolor: 'background.paper',
height: 100,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'center',
p: 1,
m: 1,
bgcolor: 'background.paper',
height: 100,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'stretch',
p: 1,
m: 1,
bgcolor: 'background.paper',
height: 100,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'baseline',
p: 1,
m: 1,
bgcolor: 'background.paper',
height: 116,
borderRadius: 1,
}}
>
<Item
sx={{
height: 64,
}}
>
Item 1
</Item>
<Item
sx={{
height: 84,
}}
>
Item 2
</Item>
<Item>Item 3</Item>
</Box>
</div>
);
}
|
Output:
6. align-content: flex-start | flex-end | center | space-between | space-around | stretch
App.js
import * as React from 'react';
import Box from '@mui/material/Box';
function Item(props) {
const { sx, ...other } = props;
return (
<Box
sx={{
display: 'flex',
p: 1,
m: 1,
bgcolor: '#101010',
color: 'grey.300',
border: '1px solid',
borderColor: 'grey.800',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...sx,
}}
{...other}
/>
);
}
export default function App() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
alignContent: 'flex-start',
p: 1,
m: 1,
bgcolor: 'background.paper',
maxWidth: 380,
height: 200,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
<Item>Item 4</Item>
<Item>Item 5</Item>
<Item>Item 6</Item>
<Item>Item 7</Item>
</Box>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
alignContent: 'flex-end',
p: 1,
m: 1,
bgcolor: 'background.paper',
maxWidth: 380,
height: 200,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
<Item>Item 4</Item>
<Item>Item 5</Item>
<Item>Item 6</Item>
<Item>Item 7</Item>
</Box>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
alignContent: 'center',
p: 1,
m: 1,
bgcolor: 'background.paper',
maxWidth: 380,
height: 200,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
<Item>Item 4</Item>
<Item>Item 5</Item>
<Item>Item 6</Item>
<Item>Item 7</Item>
</Box>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
alignContent: 'space-between',
p: 1,
m: 1,
bgcolor: 'background.paper',
maxWidth: 380,
height: 200,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
<Item>Item 4</Item>
<Item>Item 5</Item>
<Item>Item 6</Item>
<Item>Item 7</Item>
</Box>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
alignContent: 'space-around',
p: 1,
m: 1,
bgcolor: 'background.paper',
maxWidth: 380,
height: 200,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
<Item>Item 4</Item>
<Item>Item 5</Item>
<Item>Item 6</Item>
<Item>Item 7</Item>
</Box>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
alignContent: 'stretch',
p: 1,
m: 1,
bgcolor: 'background.paper',
maxWidth: 380,
height: 200,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
<Item>Item 4</Item>
<Item>Item 5</Item>
<Item>Item 6</Item>
<Item>Item 7</Item>
</Box>
</div>
);
}
|
Output:
7. order: type Number
App.js
import * as React from 'react';
import Box from '@mui/material/Box';
function Item(props) {
const { sx, ...other } = props;
return (
<Box
sx={{
display: 'flex',
p: 1,
m: 1,
bgcolor: '#101010',
color: 'grey.300',
border: '1px solid',
borderColor: 'grey.800',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...sx,
}}
{...other}
/>
);
}
export default function App() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{ display: 'flex', p: 1,
bgcolor: 'background.paper',
borderRadius: 1 }}
>
<Item sx={{ order: 2 }}>
Item 1</Item>
<Item sx={{ order: 3 }}>
Item 2</Item>
<Item sx={{ order: 1 }}>
Item 3</Item>
</Box>
</div>
);
}
|
Output:
8. flex-grow: type Number
App.js
import * as React from 'react';
import Box from '@mui/material/Box';
function Item(props) {
const { sx, ...other } = props;
return (
<Box
sx={{
display: 'flex',
p: 1,
m: 1,
bgcolor: '#101010',
color: 'grey.300',
border: '1px solid',
borderColor: 'grey.800',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...sx,
}}
{...other}
/>
);
}
export default function App() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{
display: 'flex', p: 1,
bgcolor: 'background.paper',
borderRadius: 1
}}
>
<Item sx={{ flexGrow: 1 }}>
Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
</div>
);
}
|
Output:
9. flex-shrink: type Number
App.js
import * as React from 'react';
import Box from '@mui/material/Box';
function Item(props) {
const { sx, ...other } = props;
return (
<Box
sx={{
display: 'flex',
p: 1,
m: 1,
bgcolor: '#101010',
color: 'grey.300',
border: '1px solid',
borderColor: 'grey.800',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...sx,
}}
{...other}
/>
);
}
export default function App() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{ display: 'flex', p: 1,
bgcolor: 'background.paper',
borderRadius: 1 }}
>
<Item sx={{ width: '100%' }}>
Item 1</Item>
<Item sx={{ flexShrink: 1 }}>
Item 2</Item>
<Item sx={{ flexShrink: 0 }}>
Item 3</Item>
</Box>
</div>
);
}
|
Output:
Reference: https://mui.com/system/flexbox/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...