layout

@alifd/layout

Layout of PC

Box

参数 说明 类型 默认值
direction 布局方向

可选值:
'row', 'column'		 Enum column
justify 主轴对齐方式

可选值:
'flex-start', 'center', 'flex-end', 'space-between', 'space-around'		 Enum flex-start
align 与主轴垂直方向的对齐方式

可选值:
'flex-start', 'center', 'flex-end', 'baseline', 'stretch'		 Enum stretch
wrap 直接子元素是否可折行

可选值:
'wrap', 'nowrap'		 Enum nowrap
flex flex-grow, flex-shrink, flex-basis 简写，采用数组方式例如[0, 1, 'auto']
或者直接简写为数字		 Array/Number -
spacing 直接子元素之间的间距(margin) Number 0
padding 自身的padding Array/Number 0
width 宽度 String/Number auto
minWidth 最小宽度 String/Number none
maxWidth 最大宽度 String/Number none
height 高度 String/Number auto
minHeight 最小高度 String/Number none
maxHeight 最大高度 String/Number none
background 背景色 String auto
shadow 阴影 any ''
corner 角 any 0
lineWidth 边框宽度 Number 0
lineStyle 边框样式

可选值:
'dotted', 'solid', 'double', 'dashed'		 Enum solid
lineColor 边框颜色 String #000
position 定位

可选值:
'absolute', 'relative'		 Enum relative
left 距离非static的父节点的左侧距离 String/Number auto
top 距离非static的父节点的顶部距离 String/Number auto
right 距离非static的父节点的右侧距离 String/Number auto
bottom 距离非static的父节点的底部距离 String/Number auto
opacity 透明度 Number 1
Component 默认渲染的html节点标签值 String div
overflow 自身的overflow类型

可选值:
'visible', 'hidden', 'scroll', 'auto', 'inherit'		 Enum visible
children 子节点 React.Node -

Layout

Layout Layout.Header Layout.Footer Layout.Aside Layout.Main API 继承自Box

参数 说明 类型 默认值
hasSider 直接子节点中是否有Aside Boolean false
children 子节点 React.Node -

Text

参数 说明 类型 默认值
color 字体颜色 String #000
fontFamily 字体库 String
fontSize 字体大小 Number 14
fontStyle 斜体

可选值:
'normal', 'italic'		 Enum normal
fontWeight 字重 String/Number normal
textDecorationLine 下划线

可选值:
'none', 'underline', 'overline', 'line-through'		 Enum none
textDecorationColor 字体颜色 String #000
textDecorationStyle 下划线

可选值:
'solid', 'wavy', 'double', 'dotted', 'dashed'		 Enum solid
letterSpacing 字间距 Number 0
lineHeight 行高 Number
textAlign 字体对齐方式

可选值:
'auto', 'left', 'right', 'center', 'justify'		 Enum left
opacity 透明度 Number 1
style 自定义样式 Object
children 子节点 React.Node -

Grid

参数 说明 类型 默认值
rows 有几行 String/Number 1
columns 有几列 String/Number 1
device 当前所处设备

可选值:
'phone', 'tablet', 'desktop'

当设置device后，默认columns分别为 4, 8, 12		 Enum
gap 间距 Array/Number 0
direction 布局方向

可选值:
'row', 'column'		 Enum column
dense 是否为密集模式 Boolean false
align (子元素的)与主轴垂直方向的对齐方式

可选值:
'start', 'end', 'center', 'stretch'		 Enum start
justify (子元素的)与主轴垂直方向的对齐方式

可选值:
'start', 'end', 'center', 'stretch'		 Enum start
justifySelf (自身的)与主轴垂直方向的对齐方式

可选值:
'start', 'end', 'center', 'stretch'		 Enum start
alignSelf (自身的)与主轴垂直方向的对齐方式

可选值:
'start', 'end', 'center', 'stretch'		 Enum start
autoRowsHeight (子元素的) 高度，仅在 direction 为 column 时生效。设置后 String/Number auto
row (作为子元素)从行的第几个线条算起(最小为1) String/Number initial
col (作为子元素)从列的第几个线条算起(最小为1) String/Number initial
rowSpan 在纵向占据了几个格子 Number 1
colSpan 在横向占据了几个格子 Number 1
tabletColSpan 在tablet模式下横向占据了几个格子 Number 1
phoneColSpan 在phone模式下横向占据了几个格子 Number 1
width 宽度 String/Number auto
minWidth 最小宽度 String/Number none
maxWidth 最大宽度 String/Number none
height 高度 String/Number auto
minHeight 最小高度 String/Number none
maxHeight 最大高度 String/Number none
background 背景色 String auto
shadow 阴影 any ''
corner 角 any 0
lineWidth 边框宽度 Number 0
lineStyle 边框样式

可选值:
'dotted', 'solid', 'double', 'dashed'		 Enum solid
lineColor 边框颜色 String #000
position 定位

可选值:
'absolute', 'relative'		 Enum relative
left 距离非static的父节点的左侧距离 String/Number auto
top 距离非static的父节点的顶部距离 String/Number auto
right 距离非static的父节点的右侧距离 String/Number auto
bottom 距离非static的父节点的底部距离 String/Number auto
opacity 透明度 Number 1
Component 默认渲染的html节点 String div
overflow 自身的overflow类型

可选值:
'visible', 'hidden', 'scroll', 'auto', 'inherit'		 Enum visible
children 子节点 React.Node -

DEMO 列表

Box demo

Box

Box是 以 flex 布局为原型的 @alifd/layout 布局的基础。

import { Box } from '@alifd/layout';

class BoxDemo extends React.Component {
    render() {
        return (
        <div className="list">
            <div className="list-item">
                <Box direction="row" wrap="wrap" lineColor="#000" lineWidth={1} lineStyle='solid' spacing={30}>
                    <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={100} direction="row" wrap="wrap" width={150} spacing={8} padding={10}>
                        <Box lineColor="#000" lineWidth={1} lineStyle='dashed' height={20} width={30} margin={[3,6]} style={{marginRight: 10}}/>
                        <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={20} width={30} />
                        <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={20} width={30} />
                        <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={20} width={30} />
                        <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={20} width={30} />
                        <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={20} width={30} />
                        <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={20} width={30} />
                    </Box>

                    <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={100} width={150} />
                    <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={100} width={150} />
                    <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={100} width={150} />
                    <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={100} width={150} />
                    <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={100} width={150} />
                    <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={100} width={150} />
                    <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={100} width={150} />
                </Box>
            </div>

            <div className="list-item">
                <Box direction="row" wrap="wrap" spacing={30} justify='center'>
                    <div style={{
                        height: '100px',
                        width: '50px',
                        border: '1px solid #000'
                    }} >abc</div>
                    <div style={{
                        height: '100px',
                        width: '50px',
                        border: '1px solid #000'
                    }} />
                    <span alignSelf={'center'}>31242</span>
                    <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={100} width={150} />
                    <div style={{
                        height: '100px',
                        width: '50px',
                        border: '1px solid #000'
                    }} />
                </Box>
            </div>
            <div className="list-item">
                <Box spacing={30} align="stretch">
                    <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={30} />
                    <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={30} style={{marginTop: 0}}/>
                    <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={30} margin={[10, 20]}/>
                    <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={30} />
                </Box>
            </div>
            <div className="list-item">
                <Box direction="row" wrap="wrap" spacing={30}>
                    <Box flex={1} lineColor="#000" lineWidth={1} lineStyle='solid' height={200} width={150}>
                        <Box height={200} spacing={20}>
                            <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={40} width={150} />
                            <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={40} width={150} />
                            <Box lineColor="#000" lineWidth={1} lineStyle='solid' height={40} width={150} />
                        </Box>
                    </Box>
                    <Box flex={1} lineColor="#000" lineWidth={1} lineStyle='solid' height={200} width={150} />
                    <Box flex={1} lineColor="#000" lineWidth={1} lineStyle='solid' height={200} width={150} />
                </Box>
            </div>
        </div>
        );
    }
}

ReactDOM.render(<BoxDemo />, mountNode);
.list {
  position: relative;
}
.list-item {
  position: relative;
  background: #ddd;
  border: 1px solid #eee;
  margin-bottom: 20px;
}
.child {
  width: 100%;
  height: 100%;
  background: 'red';
}

Grid demo

Grid

Grid是 以 flex 布局为原型的 @alifd/layout 布局的基础。

import { Grid, Box } from '@alifd/layout';

class GridDemo extends React.Component {
    render() {
        return (
        <div className="list">
            <div className="list-item">
              <Grid height={200} rows={3} columns={4} dense gap={[10, 20]} >
                  <Grid lineStyle={'solid'} lineWidth={1} row={1} col={1} rowSpan={2}/>
                  <Grid lineStyle={'solid'} lineWidth={1} />
                  <Grid lineStyle={'solid'} lineWidth={1} />
                  <Grid lineStyle={'solid'} lineWidth={1} />
                  <Grid lineStyle={'solid'} lineWidth={1} />
                  <Grid lineStyle={'solid'} lineWidth={1} />
              </Grid>
            </div>
            <div className="list-item">
              <Grid height={200} rows={3} columns={3} gap={10}>
                  <Grid lineStyle={'solid'} lineWidth={1} row={1} col={1} colSpan={2} />
                  <Grid lineStyle={'solid'} lineWidth={1} row={1} col={3} rowSpan={2} />
                  <Grid lineStyle={'solid'} lineWidth={1} row={2} col={1} rowSpan={2} />
                  <Grid lineStyle={'solid'} lineWidth={1} />
                  <Grid lineStyle={'solid'} lineWidth={1} row={3} col={2} colSpan={2} />
              </Grid>
            </div>

            <div className="list-item">
              <Grid height={200} rows={3} gap={10}>
                  <Box lineWidth={1} lineStyle={'solid'} />
                  <Box lineWidth={1} lineStyle={'solid'} />
                  <Box lineWidth={1} lineStyle={'solid'} />
              </Grid>
            </div>

            <div className="list-item">
              <Grid height={200} gap={10}>
                  <Box lineWidth={1} lineStyle={'solid'} />
                  <Box lineWidth={1} lineStyle={'solid'} />
                  <Box lineWidth={1} lineStyle={'solid'} />
              </Grid>
            </div>

            <div className="list-item">
              <Grid columns={2} gap={10} autoRowsHeight={50}>
                  <Box lineWidth={1} lineStyle={'solid'} />
                  <Box lineWidth={1} lineStyle={'solid'} />
                  <Box lineWidth={1} lineStyle={'solid'} />
                  <Box lineWidth={1} lineStyle={'solid'} />
                  <Box lineWidth={1} lineStyle={'solid'} />
                  <Box lineWidth={1} lineStyle={'solid'} />
                  <Box lineWidth={1} lineStyle={'solid'} />
                  <Box lineWidth={1} lineStyle={'solid'} />
                  <Box lineWidth={1} lineStyle={'solid'} />
              </Grid>
            </div>

            <div className="list" style={{display: 'flex'}}>
              <div className="list-item" style={{display: 'inline-block', width: '100%'}}>
                <Grid gap={10} device="desktop">
                  <Box className="mygrid grid-12" colSpan={12}>12</Box>
                  <Box className="mygrid grid-6" colSpan={6}>6</Box>
                  <Box className="mygrid grid-6" colSpan={6}>6</Box>
                  <Box className="mygrid grid-4" colSpan={4}>4</Box>
                  <Box className="mygrid grid-4" colSpan={4}>4</Box>
                  <Box className="mygrid grid-4" colSpan={4}>4</Box>
                  <Box className="mygrid grid-3" colSpan={3}>3</Box>
                  <Box className="mygrid grid-3" colSpan={3}>3</Box>
                  <Box className="mygrid grid-3" colSpan={3}>3</Box>
                  <Box className="mygrid grid-3" colSpan={3}>3</Box>
                </Grid>
              </div>
              <div className="list-item" style={{display: 'inline-block', width: '100%', margin: '0 20px 20px'}}>
                <Grid gap={10} device="tablet">
                  <Box className="mygrid grid-12" colSpan={12}>12</Box>
                  <Box className="mygrid grid-6" colSpan={6}>6</Box>
                  <Box className="mygrid grid-6" colSpan={6}>6</Box>
                  <Box className="mygrid grid-4" colSpan={4}>4</Box>
                  <Box className="mygrid grid-4" colSpan={4}>4</Box>
                  <Box className="mygrid grid-4" colSpan={4} tabletColSpan={8}>4 tabletColSpan=8</Box>
                  <Box className="mygrid grid-3" colSpan={3}>3</Box>
                  <Box className="mygrid grid-3" colSpan={3}>3</Box>
                  <Box className="mygrid grid-3" colSpan={3}>3</Box>
                  <Box className="mygrid grid-3" colSpan={3}>3</Box>
                </Grid>
              </div>
              <div className="list-item" style={{display: 'inline-block', width: '100%'}}>
                <Grid gap={10} device="phone">
                  <Box className="mygrid grid-12" colSpan={12}>12</Box>
                  <Box className="mygrid grid-6" colSpan={6}>6</Box>
                  <Box className="mygrid grid-6" colSpan={6}>6</Box>
                  <Box className="mygrid grid-4" colSpan={4}>4</Box>
                  <Box className="mygrid grid-4" colSpan={4}>4</Box>
                  <Box className="mygrid grid-4" colSpan={4}>4</Box>
                  <Box className="mygrid grid-3" colSpan={3}>3</Box>
                  <Box className="mygrid grid-3" colSpan={3}>3</Box>
                  <Box className="mygrid grid-3" colSpan={3}>3</Box>
                  <Box className="mygrid grid-3" colSpan={3} phoneColSpan={2}>3 phoneColSpan=2</Box>
                </Grid>
              </div>
            </div>
        </div>
        );
    }
}

ReactDOM.render(<GridDemo />, mountNode);
.list {
  position: relative;
}
.list-item {
  position: relative;
  background: #ddd;
  border: 1px solid #eee;
  margin-bottom: 20px;
}
.child {
  width: 100%;
  height: 100%;
  background: 'red';
}
.mygrid {
  display: block;
  text-align: center;
  height: 40px;
  line-height: 40px;
}
.grid-12 {
  background: red;
}
.grid-6 {
  background: purple;
}
.grid-4 {
  background: orange;
}
.grid-3 {
  background: green;
}

Text demo

import { Box, Text } from '@alifd/layout';

class TextDemo extends React.Component {
  render() {
    return (
      <div className="list">
        <Text color="#000">This <Text color="red">is</Text> a text.</Text>
        <br />
        <Box direction="row"> 
            <Text fontWeight="bold">This is a text.</Text>
            <Text fontWeight="bold">This is a text.</Text>
            <Text fontWeight="bold">This is a text.</Text>
        </Box>
        <br />
        <Text textDecorationLine="line-through">This is a text.</Text>
        <br />
        <Text fontStyle="italic">This is a text.</Text>        
        <br />
        <Text fontSize={20}>This is a text.</Text>
      </div>
    );
  }
}

ReactDOM.render(<TextDemo />, mountNode);

Image demo

import { Image } from '@alifd/layout';

class ImageDemo extends React.Component {
  render() {
    return (
      <div className="list">
        <Image src="http://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png" width={142} height={58} />
      </div>
    );
  }
}

ReactDOM.render(<ImageDemo />, mountNode);
.list {
  position: relative;
}

Layout demo

import { Layout, Box } from '@alifd/layout';

const { Header, Footer, Main, Aside } = Layout;

class LayoutDemo extends React.Component {
  render() {
    return (
      <div className="layout-list">
        <div className="list-item">
          <Layout>
            <Aside>Aside</Aside>
            <Layout>
              <Header>header</Header>
              <Main />
              <Footer>footer</Footer>
            </Layout>
            <Aside>Aside2</Aside>
          </Layout>
        </div>
        <div className="list-item">
          <Layout className="layout">
            <Header>header</Header>
            <Layout>
              <Aside>Aside</Aside>
              <Main>main</Main>
            </Layout>
            <Footer>footer</Footer>
          </Layout>
        </div>

        <div className="list-item">
          <Layout className="layout">
            <Header>header</Header>
            <Layout>
              <Aside>Aside</Aside>
              <Layout>
                <Main>main</Main>
                <Footer>footer</Footer>
              </Layout>
            </Layout>
          </Layout>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<LayoutDemo />, mountNode);
.list-item {
  width: 600px;
  margin-top: 20px;
}

.layout-list header,
.layout-list footer,
.layout-list aside,
.layout-list section {
  border: 1px solid #fff !important;
  justify-content: center !important;
  text-align: center !important;
}

.layout-list header,
.layout-list footer {
  background: #7dbcea !important;
  color: #fff;
}

.layout-list aside {
  min-width: 100px;
  background: #3ba0e9 !important;
  align-items: center !important;
}

.layout-list section {
  background: rgba(16, 142, 233, 1) !important;
  color: #fff !important;
  min-height: 120px;
}

Layout fixed demo

import { Layout, Box } from '@alifd/layout';

const { Header, Footer, Main, Aside } = Layout;

const LoneContext = (
  <div>
    <br /><br />
    top
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    middle
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    bottom
  </div>
);

class LayoutDemo extends React.Component {
  render() {
    return (
      <div className="layout-list-fixed">
        <div className="layout-list-item">
          <span className="item-title">吸顶</span>
          <Layout>
            <Header height="50px">header</Header>
            <Layout height="250px" style={{ overflow: 'auto' }} >
              <Main>
                {'<Layout height="250px"/> '} <br />
                可以写成 <br /> {'<Layout height={\'calc(100vh - ${HeaderHignt})\'} />'}
                {LoneContext}
              </Main>
              <Footer>footer</Footer>
            </Layout>
          </Layout>
        </div>
        <div className="layout-list-item">
          <span className="item-title">吸顶-吸底</span>
          <Layout>
            <Header height="50px">header</Header>
            <Layout height="200px" style={{ overflow: 'auto' }}>
              <Main>
                {'<Layout height="200px"/> '} <br />
                可以写成 <br /> {'<Layout height={\'calc(100vh - ${HeaderHignt} - ${FooterHignt})\'} />'}
                {LoneContext}
              </Main>
            </Layout>
            <Footer height="50px">footer</Footer>
          </Layout>
        </div>
        <div className="layout-list-item">
          <span className="item-title">吸顶-吸边</span>
          <Layout>
            <Header height="50px">header</Header>
            <Layout height="250px" style={{ overflow: 'auto' }}>
              <Aside width="100px">Aside</Aside>
              <Main width="300px" style={{ overflow: 'auto' }}>
                {'<Layout height="250px"/> '} <br />
                可以写成 <br /> {'<Layout height={\'calc(100vh - ${HeaderHignt})\'} />'} <br />
                <br />
                {'<Main width="300px"/> '} <br />
                可以写成 <br /> {'<Main width={\'calc(100vw - ${AsideWidth})\'} />'}
                {LoneContext}
                <Footer>footer</Footer>
              </Main>
            </Layout>
          </Layout>
        </div>

        <div className="layout-list-item">
          <span className="item-title">吸顶 + aside</span>
          <Layout>
            <Header height="50px">header</Header>
            <Layout height="250px" style={{ overflow: 'auto' }}>
              <Layout spacing={20}>
                <Aside width="100px">Aside</Aside>
                <Main width="300px">
                  {'<Layout height="250px"/> '} <br />
                  可以写成 <br /> {'<Layout height={\'calc(100vh - ${HeaderHignt})\'} />'} <br />
                  <br />
                  {'<Main width="300px"/> '} <br />
                  可以写成 <br /> {'<Main width={\'calc(100vw - ${AsideWidth})\'} />'}
                  {LoneContext}
                </Main>
              </Layout>
              <Footer>footer</Footer>
            </Layout>
          </Layout>
        </div>

        <div className="layout-list-item">
          <span className="item-title">吸顶-吸底 + aside</span>
          <Layout>
            <Header height="50px">header</Header>
            <Layout maxHeight="200px" style={{ overflow: 'auto' }}>
              <Layout height="100%">
                <Aside width="100px">Aside</Aside>
                <Main width="300px">
                  {'<Layout maxHeight="200px"/> '} <br />
                  可以写成 <br /> {'<Layout height={\'calc(100vh - ${HeaderHignt})\'} />'} <br />
                  <br />
                  {'<Main width="300px"/> '} <br />
                  可以写成 <br /> {'<Main width={\'calc(100vw - ${AsideWidth})\'} />'}
                  {LoneContext}
                </Main>
              </Layout>
            </Layout>
            <Footer height="50px">footer</Footer>
          </Layout>
        </div>

        <div className="layout-list-item">
          <span className="item-title">吸顶-吸底-吸边</span>
          <Layout>
            <Header height="50px">header</Header>
            <Layout height="200px" style={{ overflow: 'auto' }}>
              <Aside width="100px">Aside</Aside>
              <Main width="300px" style={{ overflow: 'auto' }}>
                {'<Layout height="200px"/> '} <br />
                可以写成 <br /> {'<Layout height={\'calc(100vh - ${HeaderHignt})\'} />'} <br />
                <br />
                {'<Main width="300px"/> '} <br />
                可以写成 <br /> {'<Main width={\'calc(100vw - ${AsideWidth})\'} />'}
                {LoneContext}
              </Main>
            </Layout>
            <Footer height="50px">footer</Footer>
          </Layout>
        </div>

        <div className="layout-list-item">
          <span className="item-title">吸顶-吸底-吸边2</span>
          <Layout>
            <Header height="50px">header</Header>
            <Layout height="250px" style={{ overflow: 'auto' }}>
              <Aside width="100px">Aside</Aside>
              <Layout width="300px">
                <Main style={{ overflow: 'auto' }}>
                  {'<Layout height="200px"/> '} <br />
                  可以写成 <br /> {'<Layout height={\'calc(100vh - ${HeaderHignt})\'} />'} <br />
                  <br />
                  {'<Layout width="300px"/> '} <br />
                  可以写成 <br /> {'<Layout width={\'calc(100vw - ${AsideWidth})\'} />'}
                  {LoneContext}
                </Main>
                <Footer height="50px">footer</Footer>
              </Layout>
            </Layout>
          </Layout>
        </div>

        <div className="layout-list-item">
          <span className="item-title">吸底</span>
          <Layout>
            <Layout height="250px" style={{ overflow: 'auto' }}>
              <Header>header</Header>
              <Layout>
                <Aside width="100px">Aside</Aside>
                <Main width="300px">
                  {'<Layout height="200px"/> '} <br />
                  可以写成 <br /> {'<Layout height={\'calc(100vh - ${HeaderHignt})\'} />'} <br />
                  <br />
                  {'<Main width="300px"/> '} <br />
                  可以写成 <br /> {'<Main width={\'calc(100vw - ${AsideWidth})\'} />'}
                  {LoneContext}
                </Main>
              </Layout>
            </Layout>
            <Footer height="50px">footer</Footer>
          </Layout>
        </div>
        <div className="layout-list-item">
          <span className="item-title">吸边</span>
          <Layout height="100%">
            <Aside width="100px">Aside</Aside>
            <Layout width="300px" style={{ overflow: 'auto' }}>
              <Header>header</Header>
              <Main>
                {'<Layout width="300px"/> '} <br />
                可以写成 <br /> {'<Layout width={\'calc(100vw - ${AsideWidth})\'} />'}
                {LoneContext}
              </Main>
              <Footer>footer</Footer>
            </Layout>
          </Layout>
        </div>
        <div className="layout-list-item">
          <span className="item-title">吸边-吸顶</span>
          <Layout height="100%">
            <Aside width="100px">Aside</Aside>
            <Layout width="300px">
              <Header height="50px">header</Header>
              <Main height="250px" style={{ overflow: 'auto' }}>
                {'<Layout width="300px"/> '} <br />
                可以写成 <br /> {'<Layout width={\'calc(100vw - ${AsideWidth})\'} />'}
                {LoneContext}
              </Main>
            </Layout>
          </Layout>
        </div>
        <div className="layout-list-item">
          <span className="item-title">吸边-吸底-吸顶</span>
          <Layout height="100%">
            <Layout>
              <Aside width="100px">Aside</Aside>
              <Layout width="300px">
                <Header height="50px">header</Header>
                <Main height="250px" style={{ overflow: 'auto' }}>
                  {'<Layout width="300px"/> '} <br />
                  可以写成 <br /> {'<Layout width={\'calc(100vw - ${AsideWidth})\'} />'} <br />
                  <br />
                  {'<Main width="250px"/> '} <br />
                  可以写成 <br /> {'<Main width={\'calc(100vh - ${HeaderHeight})\'} />'}
                  {LoneContext}
                </Main>
              </Layout>
            </Layout>
            <Footer>footer</Footer>
          </Layout>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<LayoutDemo />, mountNode);
.layout-list-fixed {
  display: flex;
  flex-wrap: wrap;
}
.layout-list-item {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 50px 50px 0;
}
.item-title {
  position: absolute;
  top: -1.5em;
  font-size: 1.5em;
  left: 0;
  z-index: 1;
}

.layout-list-fixed header,
.layout-list-fixed footer,
.layout-list-fixed aside,
.layout-list-fixed section {
  text-align: center !important;
}

.layout-list-fixed header,
.layout-list-fixed footer {
  background: #7dbcea !important;
  color: #fff;
}

.layout-list-fixed aside {
  background: #3ba0e9 !important;
  align-items: center !important;
}

.layout-list-fixed section {
  background: rgba(16, 142, 233, 1) !important;
  color: #fff !important;
}