极客教程React MUI Flexbox
在这篇文章中，我们将学习MUI中的flexbox系统。 Material UI是一个开源的设计框架，展示了用React制作的不同组件。它由谷歌自2014年以来开发和维护。
什么是flexbox？
Flexbox是一个CSS 3网页布局模型，它允许我们根据视口大小来响应式地对齐容器中的元素。
语法：
display: flex
创建React应用程序并安装模块
步骤1： 使用以下命令创建一个React应用程序：
npx create-react-app foldername
步骤2： 创建项目文件夹，例如foldername，然后使用以下命令进入该文件夹：
cd foldername
步骤3: 在创建了ReactJS应用之后，使用以下命令安装所需模块：
npm install @mui/material
npm install @mui/system
npm install @emotion/react
npm install @emotion/styled
项目结构： 它将呈现如下所示。
示例： 现在，让我们创建一个包含3个方框的简单应用程序。将你的 App.js 文件更改如下：
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>
);
}
运行应用程序的步骤： 在终端中输入以下代码以运行应用程序：
npm start
输出：
现在，让我们更改父元素的属性：
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>
);
}
输出：
2. flex-direction: 行 | 行反转 | 列 | 列反转
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>
);
}
输出：
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>
);
}
输出：
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>
);
}
输出：
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>
);
}
输出：
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>
);
}
输出：
7. 订单: 类型 数字
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>
);
}
输出：
8. flex-grow: 类型：数字类型
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>
);
}
输出:
9. flex-shrink: 类型：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>
);
}
输出：
参考： https://mui.com/system/flexbox/