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/
Share your thoughts in the comments
Please Login to comment...