二、class = "table" 、float和flex的多列

table标签（display:table）

1. table可设置宽高、margin、border、padding等属性。属性值的单位可以使用px，百分比值。
2. table的宽度默认由内容的宽高撑开，如果table设置了宽度，宽度默认被它里面的td平均分，如果给某一个td设置宽度，那么table剩余的宽度会被其他的td平均分（有点类似flex布局）
3. 给table设置的高度起到的作用只是min-height的作用，当内容的高度高于设置的高度时，table的高度会被撑高。

tr标签（display:table-row）

1. 给tr设置高度只起到min-height的作用，默认会平分table的高度。
2. tr中的td默认高度会继承tr的高度，若给任一td设置了高度，其他td的高度也同样变高。适合多列等高布局
3. 设置宽度、margin、都不起作用

td标签（display:table-cell）

1. td默认继承tr的高度，且平分table的宽度
2. 若table（display:table）不存在，给td设置的宽高不能用百分比只能用准确的数值
3. 给td设置vertical-align: middle; td元素里面(除float、position:absolute)所有的块级、非块级元素都会相对于td垂直居中
4. 给td设置text-align: center; td元素里面所有非block元素(除float、position:absolute)都会相对于td水平居中，虽然block元素不居中，但其中的文字或inline元素会水平居中

flex布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?
flex-direction: row（默认） | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <flex-direction> <flex-wrap>;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: align-content: flex-start | flex-end | center | space-between | space-around | stretch;

order
flex-grow 放大
flex-shrink 缩小
flex-basis
flex
align-self

flex常用的

justify-content: center | space-between ;
align-items:center;

grid布局

https://www.jianshu.com/p/d183265a8dad

//  form
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 7 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 12 },
    md: { span: 10 },
  },
};

const submitFormLayout = {
  wrapperCol: {
    xs: { span: 24, offset: 0 },
    sm: { span: 10, offset: 7 },
  },
};
//  使用
        <FormItem {...submitFormLayout}>
            <Button type="primary" htmlType="submit" loading={submitting}>
              提交
            </Button>
          </FormItem>
//  List
    grid={{ gutter: 24, xxl: 4, xl: 3, lg: 2, md: 2, sm: 1, xs: 1 }}