React MUI Flexbox
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/
Contact Us