Ant Design布局：Flex, Grid, Layout

• 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 = () => (
  <Space
    direction="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>
);