React学习记录1-Grid 布局与Flex 布局

1. Grid 布局与Flex 布局

简单示例Grid

import React from 'react'
import {Row,Col} from 'antd'
export default function Grid(){
    return (
        <>
            <Row>
                <Col span={24}>col</Col>
            </Row>
            <Row>
                <Col span={12}>col-12</Col>
                <Col span={12}>col-12</Col>
            </Row>
            <Row>
                <Col span={8}>col-8</Col>
                <Col span={8}>col-8</Col>
                <Col span={8}>col-8</Col>
            </Row>
            <Row>
                <Col span={6}>col-6</Col>
                <Col span={6}>col-6</Col>
                <Col span={6}>col-6</Col>
                <Col span={6}>col-6</Col>
            </Row>
        </>
    )
}

常用布局方式Flex

// 纵向
<ColFlex>
    <FlexItem> <FlexItem>
    <FlexItem> <FlexItem>
    // ...
</ColFlex>
// 横向
<RowFlex>
    <FlexItem> <FlexItem>
    <FlexItem> <FlexItem>
    // ...
</RowFlex>
​
// RowFlex和ColFlex常用配置参数
// style,justify
<RowFlex
    style={{height:'100%'}} // style通常用来控制宽度和高度
    justify={'start'}       // 用来控制对齐方式，可选值为start，起始位置对齐；和space-between，两端对齐
><RowFlex>   
​
// FlexItem常用配置参数
// style、flexBasic
// flexBasic有四个可选参数: number、string、"auto"、"fill"
// 1. 当什么也不设置时，为fill，FlexItem的宽度占满页面的剩余空间；
// 2. 当设置参数为数字100时，固定FlexItem的宽度为100px；
// 3. 当设置参数为字符串50%时，固定FlexItem的宽度为父元素的50%；
// 4. 当设置参数为"auto"时，FlexItem的宽度随着内容的变化而变化
<FlexItem
    flexBasic={100}
></FlexItem>
​

Grid布局分隔

栅格布局产生间隔是通过使用Row的gutter属性（各个栅格之间的间隔）实现的 推荐使用 (16+8n)px 作为栅格间隔(n 是自然数)

import React from 'react'
import {Row,Col} from 'antd'
const style = { background: '#0092ff', padding: '8px 0' };
export default function Grid(){
    return (
        <>
            <Row gutter={16}>
                <Col className="gutter-row" span={6}>
                    <div style={style}>col-6</div>
                </Col>
                <Col className="gutter-row" span={6}>
                    <div style={style}>col-6</div>
                </Col>
                <Col className="gutter-row" span={6}>
                    <div style={style}>col-6</div>
                </Col>
                <Col className="gutter-row" span={6}>
                    <div style={style}>col-6</div>
                </Col>
            </Row>
        </>
    )
}
​