• React初步
• antd初步

任何UI工具，布局都是设计过程中必不可少的一环，前端更是如此。但网页和桌面应用还有区别，正常的网页，无论在手机还是PC上，基本都是自上而下排布的信息流，这种浏览方式对布局来说是一个限制，即很难想象一个网页提供从下到上的浏览方式。

AntD主要提供了三种布局方式，分别是弹性布局、栅格布局和规划布局，由于antd官网提供了非常友好的示例，所以下面仅用最简单的代码展示个中差异。

Flex

Flex布局就是按照指定的方向，将对应元素压入其中。下面创建一个纵向的Flex，在装入两个div之后，再装入一个横向的Flex。

import React from 'react';
import { Flex } from 'antd';const vStyle = {width: '25%',height: 54,
};const hStyle = {width: '75%',height: 54,backgroundColor : 'lightgray'
}const App = () => {return (<Flex gap="middle" vertical><div style={{...hStyle}}/><div style={{...hStyle}}/><Flex horizontal><div style={{...hStyle, backgroundColor:'#1677ff'}}/><div style={{...hStyle, backgroundColor:'#1677ffbf'}}/><div style={{...hStyle, backgroundColor:'#1677ff'}}/><div style={{...hStyle, backgroundColor:'#1677ffbf'}}/></Flex></Flex>);
};
export default App;

效果如下

Grid

栅格布局也很好理解，可以理解为是等分不嵌套的Flex。在AntD中，用Row和Col实现栅格布局，其布局逻辑如下

• Row为行，Col为列，所有列都必须放在行里。
• 栅格系统在水平方向被等分为24份，通过span可调整单个Col所跨越的范围，通过offset来调整其横向偏移。
• 如果Row中Col的span总和超过 24，那么多余的Col会作为一个整体另起一行排列。

此外，考虑到不同设备的尺寸差异，antd提供了6种预设尺寸

	xs	sm	md	lg	xl	xxl
尺寸/px	$<576$	$[576,768)$	$[767,992)$	$[992,1200)$	$[1200,1600)$	$⩾1600$

示例如下，当浏览器的窗口尺寸不同时，红绿蓝三个色条的长度比例会发生明显变化

import React from 'react';
import { Col, Row } from 'antd';
const App = () => (<Row><Col style={{ background: 'red' }}xs={2} sm={4} md={6} lg={8} xl={10}>Col</Col ><Col style={{ background: 'green' }}xs={20} sm={16} md={12} lg={8} xl={4}>Col</Col><Col style={{ background: 'blue' }}xs={2} sm={4} md={6} lg={8} xl={10}>Col</Col></Row>
);
export default App;

Layout

可以把Layout理解为一系列布局组件的合称，除了Layout自身之外，还有四个只能被嵌套在Layout中的组件

• Header：顶部布局
• Sider：侧边栏
• Content：内容部分
• Footer：底部布局

由于Layout可以嵌套自身，所以这种布局方式十分灵活，将Layout核另外四种组件组合拼接，然后再用Layout进行嵌套，几乎可以实现任何布局方式，以下图为例，就是先让Layout与Header、Footer嵌套在一起，再向这个Layout中防止Sider与Content

布局代码如下

const App = () => (<Spacedirection="vertical"style={{width: '100%',}}size={[0, 48]}><Layout><Header style={headerStyle}>Header</Header><Layout hasSider><Sider style={siderStyle}>Sider</Sider><Content style={contentStyle}>Content</Content></Layout><Footer>Footer</Footer></Layout></Space>
);