Flex Flex布局

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

规则

代码演示

基本

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

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

排列方向

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

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

换行

wrap="nowrap/wrap/wrap-reverse" 

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

主轴对齐方式

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

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

交叉轴对齐方式

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

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

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
成员说明类型可选值默认值