• 问题描述
• 居中布局 ：Grid栈格
• Space设置间距
• 总结

今天在实践中，我第一次使用了Grid栈格来设置布局，也用了Space来设置合适的间距。通过Grid配合Space，设置出来了居中且自适应的Ant-Design组件。因为是第一次使用到Grid和Space，所以做一些记录。可供居中布局、自适应参考。

今天还是在处理DatePicker日期选择器这个组件的其他功能交互。但在调试的时候偶然间发现了它样式上存在一点问题：在小屏幕上出现了 超出弹窗 的问题。

超出范围显示肯定是有问题的。我想了想为什么，最后想起来问题在于，我给DatePicker的width设置成了180%。

这样设置是不好的。但那时候想先把样式做出来，而且发现datepicker本身除了设置size大中小和width百分比，并且DatePicker是inline-flex，默认宽度是自身内容宽度。很难把它调成我想要的长度大小。所以就乱来了：在大屏幕上没有问题，但在小屏幕上显示，DatePicker就超出了弹窗范围。

既然问题出在这里，就只能老实把width设置成正常的100%了。

另外我设置组件元素为居中是通过flex设置的：

.content{
	display:flex;
	justify-content:center;
在看Ant-Design的官网时，偶然间看到了Grid栈格，我感觉可以尝试用它来做一个居中布局。
 
居中布局 ：Grid栈格
 
① 引入 Row，Col
 
import React from 'react';
import ReactDOM from 'react-dom';
import { Row, Col } from 'antd';
ReactDOM.render(
      <Col span={4}>col-4</Col>
      <Col span={16}>col-16</Col>
      <Col span={4}>col-4</Col>
    </Row>
  document.getElementById('container'),
③ 实现自适应居中布局
 
 ④ 加入DatePicker日期选择器组件
 
ReactDOM.render(
      <Col span={4}>col-4</Col>
      <Col span={16}>
        <DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} />
      </Col>
      <Col span={4}>col-4</Col>
    </Row>
  document.getElementById("container")

 嗯，还是回到矛盾问题：DatePicker的长度不够长。
 
为什么它的长度不够长，又不可以作妖去设置width:180%…
 
看了一下：
 因为DatePicker是inline-flex，所以它默认宽度其实就是由自身内容宽度决定的
 
所以DatePicker没有因为它的父级元素是多大，自身宽度就是其100%。
 
Space设置间距
 
Space可以设置间距，如：
 
 注意那一句：
 
可以设置 width:100% 独占一行
 
      <Col span={4}>col-8</Col>
      <Col span={16}>
        <Space direction="vertical" style={{ width: '100%' }}>
          <DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} />
        </Space>
      </Col>
      <Col span={4}>col-8</Col>
    </Row>
自此，这个样式上的bug就解决了。
 
Grid栈格可以用于设置自适应居中布局
Space可以帮助设置宽度间距
DatePicker是inline-flex，默认宽度为自身内容宽度。但要避免改变其display属性，可以通过Space设置width来改变其宽度。
                                    React空间
 一个易于理解且可嵌套的布局系统，React Spaces允许您将页面或容器划分为锚定，可滚动和可调整大小的空间，从而使您能够在浏览器中构建桌面/移动类型的用户界面。
 Spaces不是可视的UI组件库，而是用于布局UI的可重用基础块，该UI可以对查看端口调整大小做出灵敏的响应，使您可以用所需的任何组件填充它们。
 没有样式来实现简单或复杂的布局。
 空间知道如何相互影响并相应地调整大小。
 空间没有任何视觉元素（甚至填充或边距）。 您可以随心所欲地填充它们。
 0.2.0版发行-阅读。
 查看完整的文档。
在所有其他空间的顶层使用。
 <ViewPort>
npm install --global yarn # install yarn
git clone [email protected]:Justin-lu/react-redux-antd.git demo
cd demo
# run dev
npm run start
# run 
                                    今天在实现公司项目的时候碰到需要使用ant design vue原生态表单Form以及Grid进行表单页面设计，因为感觉后续还是蛮容易遇到相类似的情况，因此在此处记录下来。
                                    一个 可视化实时渲染的 ant-design 页面搭建工具
此项目是上古项目，代码基本很难维护，现在发布出来仅供参考思路，感兴趣的可以根据原理重构一版，实现一个更完备的可视化编辑
友情提醒：不建议在团队内投入大量精力做类似的事情（企图一步到位改变开发现状），与行业里用 AI 切页面类似，尽量作为玩具把玩一下即可。
托管在 github，第一次加载会比较慢
npm run build;
npm run start;
# （已修复）因为我不太懂 webpack ，不太会配置，这个项目修改代码后实时生效还有问题。。求 pr
可视化编辑，同时实时生成结果代码，还可以单独预览
丰富的数据编辑能力，可以编辑组件的二维属性
组件可嵌套
自适应布局
除了 antd 的组件，还有一些原生 html 元素可使用
1.如何实现实时编辑
第一步，抽象整个可视化工作台的数据表
 :gem_stone:优雅美观：基于Ant Design架构精心设计
 :rocket:最新技术栈：使用React / dva / antd等前端前沿技术开发
 :input_numbers: 模拟数据：实用的本地数据调试方案
 roadhog版本升级2.0
基础布局
$ git clone https://github.com/sosout/react-antd-dva.git
$ cd react-antd-dva
$ yarn install
$ yarn start 
https://ant.design/components/grid-cn/
布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：
1）通过 row 在水平方向建立一组 column（简写 col）。
2）你的内容应当放置于 col 内，并且，只有 col 可以作为 row 的直接元素。
3）栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用  来创建。
                                    //align : 垂直对齐 left middle right
//justify: 水平对齐 start center end
<Row type="flex" justify="center" align="middle" style={{minHeight:'100vh'}}>
                                    在当前.vue的style增加穿透antd table的表头样式，然后在使用table的外层设置加上class。所有单元格：在设置第一列时加上对齐属性：align: 'center',单独设置表头：在设置列时，加上方法：customHeaderCell。问题：默认情况下，英文字体加粗，中文字体不加粗，分2种情况，单独设置表头，或者所有单元格都居中。
                                    1、移动端基本可以无阻碍的进行flex的弹性布局，这边对flex就不进行深究
2、可以进行依据窗口进行vw、vh、vmin、vmax单位的布局
（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。
具体描述如下：
vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh...