Flex Flex布局

定义／Definition

flexbox 布局

规则 / Rule

Flex布局的相关知识请先阅读阮一峰的博客Flex 布局教程## 代码演示

基本

基本,子元素FLex.Item,设置flex=1 

  1. import { Flex, Button, WingBlank, WhiteSpace } from 'antd-mobile';
  4. let FlexExample = React.createClass({
  5.   render() {
  6.     return (
  7.       <div className="button-container">
  8.         <WhiteSpace />
  9.         <WingBlank>
  10.           <Flex>
  11.             <Flex.Item>
  12.               <Button>2列</Button>
  13.             </Flex.Item>
  14.             <Flex.Item>
  15.               <Button type="primary">2列</Button>
  16.             </Flex.Item>
  17.           </Flex>
  18.         </WingBlank>
  19.         <WhiteSpace />
  20.         <WingBlank>
  21.           <Flex>
  22.             <Flex.Item>
  23.               <Button size="small">3列</Button>
  24.             </Flex.Item>
  25.             <Flex.Item>
  26.               <Button type="primary" size="small">3列</Button>
  27.             </Flex.Item>
  28.             <Flex.Item>
  29.               <Button size="small">3列</Button>
  30.             </Flex.Item>
  31.           </Flex>
  32.         </WingBlank>
  33.         <WhiteSpace />
  34.         <WingBlank>
  35.           <Flex>
  36.             <Flex.Item>
  37.               <Button>4列</Button>
  38.             </Flex.Item>
  39.             <Flex.Item>
  40.               <Button type="primary">4列</Button>
  41.             </Flex.Item>
  42.             <Flex.Item>
  43.               <Button>4列</Button>
  44.             </Flex.Item>
  45.             <Flex.Item>
  46.               <Button type="primary">4列</Button>
  47.             </Flex.Item>
  48.           </Flex>
  49.         </WingBlank>
  50.         <WhiteSpace />
  51.         <WingBlank>
  52.           <Flex>
  53.             <Flex.Item>
  54.               <Button size="small">5列</Button>
  55.             </Flex.Item>
  56.             <Flex.Item>
  57.               <Button type="primary">5列</Button>
  58.             </Flex.Item>
  59.             <Flex.Item>
  60.               <Button size="small">5列</Button>
  61.             </Flex.Item>
  62.             <Flex.Item>
  63.               <Button type="primary">5列</Button>
  64.             </Flex.Item>
  65.             <Flex.Item>
  66.               <Button type="primary">5列</Button>
  67.             </Flex.Item>
  68.           </Flex>
  69.         </WingBlank>
  70.         <WhiteSpace />
  71.       </div>
  72.     );
  73.   },
  74. });
  76. ReactDOM.render(<FlexExample />, mountNode);

排列方向

direction="row/row-reverse/column/column-reverse" 

  1. import { Flex, List, Button, WhiteSpace } from 'antd-mobile';
  3. let FlexExample = React.createClass({
  4.   render() {
  5.     return (
  6.       <div className="button-container">
  7.         <WhiteSpace />
  8.         <List>
  9.           <List.Header>row:主轴为水平方向，起点在左端</List.Header>
  10.         </List>
  11.         <Flex>
  12.           <Button size="small" type="primary" style={{ margin: '2px' }}>按钮1</Button>
  13.           <Button size="small" style={{ margin: '2px' }}>按钮2</Button>
  14.           <Button size="small" type="primary" style={{ margin: '2px' }}>按钮3</Button>
  15.           <Button size="small" style={{ margin: '2px' }}>按钮4</Button>
  16.         </Flex>
  17.         <List>
  18.           <List.Header>row-reverse:主轴为水平方向，起点在右端</List.Header>
  19.         </List>
  20.         <Flex
  21.           direction="row-reverse"
  22.         >
  23.           <Button size="small" type="primary" style={{ margin: '2px' }}>按钮1</Button>
  24.           <Button size="small" style={{ margin: '2px' }}>按钮2</Button>
  25.           <Button size="small" type="primary" style={{ margin: '2px' }}>按钮3</Button>
  26.           <Button size="small" style={{ margin: '2px' }}>按钮4</Button>
  27.         </Flex>
  28.         <List>
  29.           <List.Header>column:主轴为垂直方向，起点在上沿</List.Header>
  30.         </List>
  31.         <Flex
  32.           direction="column"
  33.         >
  34.           <Button size="small" type="primary" style={{ margin: '2px' }}>按钮1</Button>
  35.           <Button size="small" style={{ margin: '2px' }}>按钮2</Button>
  36.           <Button size="small" type="primary" style={{ margin: '2px' }}>按钮3</Button>
  37.           <Button size="small" style={{ margin: '2px' }}>按钮4</Button>
  38.         </Flex>
  39.         <List>
  40.           <List.Header>column-reverse:主轴为垂直方向，起点在下沿</List.Header>
  41.         </List>
  42.         <Flex
  43.           direction="column-reverse"
  44.         >
  45.           <Button size="small" type="primary" style={{ margin: '2px' }}>按钮1</Button>
  46.           <Button size="small" style={{ margin: '2px' }}>按钮2</Button>
  47.           <Button size="small" type="primary" style={{ margin: '2px' }}>按钮3</Button>
  48.           <Button size="small" style={{ margin: '2px' }}>按钮4</Button>
  49.         </Flex>
  50.         <WhiteSpace />
  51.       </div>
  52.     );
  53.   },
  54. });
  56. ReactDOM.render(<FlexExample />, mountNode);

换行

wrap="nowrap/wrap/wrap-reverse" 

  1. import { Flex, List, Button, WhiteSpace } from 'antd-mobile';
  3. let FlexExample = React.createClass({
  4.   render() {
  5.     return (
  6.       <div className="button-container">
  7.         <WhiteSpace />
  8.         <List>
  9.           <List.Header>nowrap(默认):不换行</List.Header>
  10.         </List>
  11.         <Flex>
  12.           <Button size="small" type="primary" style={{ margin: '2px', width: '40px' }}>1</Button>
  13.           <Button size="small" style={{ margin: '2px', width: '40px' }}>2</Button>
  14.           <Button size="small" type="primary" style={{ margin: '2px', width: '40px' }}>3</Button>
  15.           <Button size="small" style={{ margin: '2px', width: '40px' }}>4</Button>
  16.           <Button size="small" type="primary" style={{ margin: '2px', width: '40px' }}>5</Button>
  17.           <Button size="small" style={{ margin: '2px', width: '40px' }}>6</Button>
  18.           <Button size="small" type="primary" style={{ margin: '2px', width: '40px' }}>7</Button>
  19.           <Button size="small" style={{ margin: '2px', width: '40px' }}>8</Button>
  20.           <Button size="small" type="primary" style={{ margin: '2px', width: '40px' }}>9</Button>
  21.           <Button size="small" style={{ margin: '2px', width: '40px' }}>10</Button>
  22.           <Button size="small" type="primary" style={{ margin: '2px', width: '40px' }}>11</Button>
  23.           <Button size="small" style={{ margin: '2px', width: '40px' }}>12</Button>
  24.         </Flex>
  25.         <List>
  26.           <List.Header>wrap:换行，第一行在上方</List.Header>
  27.         </List>
  28.         <Flex
  29.           wrap="wrap"
  30.         >
  31.           <Button size="small" type="primary" style={{ margin: '2px', width: '40px' }}>1</Button>
  32.           <Button size="small" style={{ margin: '2px', width: '40px' }}>2</Button>
  33.           <Button size="small" type="primary" style={{ margin: '2px', width: '40px' }}>3</Button>
  34.           <Button size="small" style={{ margin: '2px', width: '40px' }}>4</Button>
  35.           <Button size="small" type="primary" style={{ margin: '2px', width: '40px' }}>5</Button>
  36.           <Button size="small" style={{ margin: '2px', width: '40px' }}>6</Button>
  37.           <Button size="small" type="primary" style={{ margin: '2px', width: '40px' }}>7</Button>
  38.           <Button size="small" style={{ margin: '2px', width: '40px' }}>8</Button>
  39.           <Button size="small" type="primary" style={{ margin: '2px', width: '40px' }}>9</Button>
  40.           <Button size="small" style={{ margin: '2px', width: '40px' }}>10</Button>
  41.           <Button size="small" type="primary" style={{ margin: '2px', width: '40px' }}>11</Button>
  42.           <Button size="small" style={{ margin: '2px', width: '40px' }}>12</Button>
  43.         </Flex>
  44.         <List>
  45.           <List.Header>wrap-reverse:换行，第一行在下方</List.Header>
  46.         </List>
  47.         <Flex
  48.           wrap="wrap-reverse"
  49.         >
  50.           <Button size="small" type="primary" style={{ margin: '2px', width: '40px' }}>1</Button>
  51.           <Button size="small" style={{ margin: '2px', width: '40px' }}>2</Button>
  52.           <Button size="small" type="primary" style={{ margin: '2px', width: '40px' }}>3</Button>
  53.           <Button size="small" style={{ margin: '2px', width: '40px' }}>4</Button>
  54.           <Button size="small" type="primary" style={{ margin: '2px', width: '40px' }}>5</Button>
  55.           <Button size="small" style={{ margin: '2px', width: '40px' }}>6</Button>
  56.           <Button size="small" type="primary" style={{ margin: '2px', width: '40px' }}>7</Button>
  57.           <Button size="small" style={{ margin: '2px', width: '40px' }}>8</Button>
  58.           <Button size="small" type="primary" style={{ margin: '2px', width: '40px' }}>9</Button>
  59.           <Button size="small" style={{ margin: '2px', width: '40px' }}>10</Button>
  60.           <Button size="small" type="primary" style={{ margin: '2px', width: '40px' }}>11</Button>
  61.           <Button size="small" style={{ margin: '2px', width: '40px' }}>12</Button>
  62.         </Flex>
  63.       </div>
  64.     );
  65.   },
  66. });
  68. ReactDOM.render(<FlexExample />, mountNode);

主轴对齐方式

justify="start/end/center/between/around" 

  1. import { Flex, List, Button, WhiteSpace } from 'antd-mobile';
  3. let FlexExample = React.createClass({
  4.   render() {
  5.     return (
  6.       <div className="button-container">
  7.         <WhiteSpace />
  8.         <List>
  9.           <List.Header>start(默认): 左对齐</List.Header>
  10.         </List>
  11.         <Flex>
  12.           <Button size="small" type="primary" style={{ width: '70px', margin: '2px' }}>按钮1</Button>
  13.           <Button size="small" style={{ width: '70px', margin: '2px' }}>按钮2</Button>
  14.           <Button size="small" type="primary" style={{ width: '70px', margin: '2px' }}>按钮3</Button>
  15.         </Flex>
  16.         <List>
  17.           <List.Header>end:右对齐</List.Header>
  18.         </List>
  19.         <Flex
  20.           justify="end"
  21.         >
  22.           <Button size="small" type="primary" style={{ width: '70px', margin: '2px' }}>按钮1</Button>
  23.           <Button size="small" style={{ width: '70px', margin: '2px' }}>按钮2</Button>
  24.           <Button size="small" type="primary" style={{ width: '70px', margin: '2px' }}>按钮3</Button>
  25.         </Flex>
  26.         <List>
  27.           <List.Header>center:居中</List.Header>
  28.         </List>
  29.         <Flex
  30.           justify="center"
  31.         >
  32.           <Button size="small" type="primary" style={{ width: '70px', margin: '2px' }}>按钮1</Button>
  33.           <Button size="small" style={{ width: '70px', margin: '2px' }}>按钮2</Button>
  34.           <Button size="small" type="primary" style={{ width: '70px', margin: '2px' }}>按钮3</Button>
  35.         </Flex>
  36.         <List>
  37.           <List.Header>between:两端对齐，项目之间的间隔都相等</List.Header>
  38.         </List>
  39.         <Flex
  40.           justify="between"
  41.         >
  42.           <Button size="small" type="primary" style={{ width: '70px', margin: '2px' }}>按钮1</Button>
  43.           <Button size="small" style={{ width: '70px', margin: '2px' }}>按钮2</Button>
  44.           <Button size="small" type="primary" style={{ width: '70px', margin: '2px' }}>按钮3</Button>
  45.         </Flex>
  46.         <List>
  47.           <List.Header>around:每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</List.Header>
  48.         </List>
  49.         <Flex
  50.           justify="around"
  51.         >
  52.           <Button size="small" type="primary" style={{ width: '70px', margin: '2px' }}>按钮1</Button>
  53.           <Button size="small" style={{ width: '70px', margin: '2px' }}>按钮2</Button>
  54.           <Button size="small" type="primary" style={{ width: '70px', margin: '2px' }}>按钮3</Button>
  55.         </Flex>
  56.       </div>
  57.     );
  58.   },
  59. });
  61. ReactDOM.render(<FlexExample />, mountNode);

交叉轴对齐方式

align="start/end/center/baseline/stretch" 

  1. import { Flex, Button, List, WingBlank, WhiteSpace } from 'antd-mobile';
  4. let FlexExample = React.createClass({
  5.   render() {
  6.     return (
  7.       <div className="button-container">
  8.         <WhiteSpace />
  9.         <WingBlank>
  10.           <List>
  11.             <List.Header>start:交叉轴的起点对齐</List.Header>
  12.           </List>
  13.           <Flex align="start">
  14.             <Flex.Item>
  15.               <Button type="primary">3列</Button>
  16.             </Flex.Item>
  17.             <Flex.Item>
  18.               <Button size="small">3列</Button>
  19.             </Flex.Item>
  20.           </Flex>
  21.         </WingBlank>
  22.         <WhiteSpace />
  23.         <WingBlank>
  24.           <List>
  25.             <List.Header>end:交叉轴的终点对齐</List.Header>
  26.           </List>
  27.           <Flex align="end">
  28.             <Flex.Item>
  29.               <Button type="primary">3列</Button>
  30.             </Flex.Item>
  31.             <Flex.Item>
  32.               <Button size="small">3列</Button>
  33.             </Flex.Item>
  34.           </Flex>
  35.         </WingBlank>
  36.         <WhiteSpace />
  37.         <WingBlank>
  38.           <List>
  39.             <List.Header>center(默认):交叉轴的中点对齐</List.Header>
  40.           </List>
  41.           <Flex align="center">
  42.             <Flex.Item>
  43.               <Button type="primary">3列</Button>
  44.             </Flex.Item>
  45.             <Flex.Item>
  46.               <Button size="small">3列</Button>
  47.             </Flex.Item>
  48.             <Flex.Item>
  49.               <Button type="primary">3列</Button>
  50.             </Flex.Item>
  51.             <Flex.Item>
  52.               <Button size="small">3列</Button>
  53.             </Flex.Item>
  54.           </Flex>
  55.         </WingBlank>
  56.         <WhiteSpace />
  57.         <WingBlank>
  58.           <List>
  59.             <List.Header>baseline:项目的第一行文字的基线对齐</List.Header>
  60.           </List>
  61.           <Flex align="baseline">
  62.             <Flex.Item>
  63.               <Button type="primary">3列</Button>
  64.             </Flex.Item>
  65.             <Flex.Item>
  66.               <Button size="small">3列</Button>
  67.             </Flex.Item>
  68.             <Flex.Item>
  69.               <Button type="primary">3列</Button>
  70.             </Flex.Item>
  71.             <Flex.Item>
  72.               <Button size="small">3列</Button>
  73.             </Flex.Item>
  74.           </Flex>
  75.         </WingBlank>
  76.         <WhiteSpace />
  77.         <WingBlank>
  78.           <List>
  79.             <List.Header>stretch:如果项目未设置高度或设为auto，将占满整个容器的高度</List.Header>
  80.           </List>
  81.           <Flex align="stretch">
  82.             <Flex.Item style={{ border: '1px solid red' }}>
  83.               <Button type="primary">3列</Button>
  84.             </Flex.Item>
  85.             <Flex.Item style={{ border: '1px solid red' }}>
  86.               <Button size="small">3列</Button>
  87.             </Flex.Item>
  88.             <Flex.Item style={{ border: '1px solid red' }}>
  89.               <Button type="primary">3列</Button>
  90.             </Flex.Item>
  91.             <Flex.Item style={{ border: '1px solid red' }}>
  92.               <Button size="small">3列</Button>
  93.             </Flex.Item>
  94.           </Flex>
  95.         </WingBlank>
  96.         <WhiteSpace />
  97.       </div>
  98.     );
  99.   },
  100. });
  102. ReactDOM.render(<FlexExample />, mountNode);

FlexFlex布局 - 图1

API

Flex

成员说明类型可选值默认值
directionFlex子元素的排列方向Stringrow（水平方向，起点在左端), row-reverse（水平方向，起点在右端), column（垂直方向，起点在上沿), column-reverse（垂直方向，起点在下沿),RN仅支持row,columnrow
wrapFlex 子元素的换行方式Stringnowrap（不换行）, wrap（换行，第一行在上方）, wrap-reverse（换行，第一行在下方）,RN仅支持nowrap,wrapnowrap
justifyFlex 子元素在主轴上的对齐方式Stringstart, end, center, between, around）,RN全部支持start
alignFlex 子元素在交叉轴上的对齐方式, top和start等价,middle和center等价,bottom和end等价, 优先使用后者（后者定义更规范）,RN仅支持start,end,center,stretchStringstart/top, center/middle, end/bottom, baseline, stretchcenter
alignContentFlex有多根轴线时的对齐方式,一般用不到,RN不支持Stringstart, end, center, between, around, stretchstretch

Flex.Item

Flex.Item组件默认加上了样式flex:1,保证所有item平均分宽度,Flex容器的children不一定是Flex.Item
成员说明类型可选值默认值