Flex Flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 如果不熟悉推荐学习下这个 Flex 布局教程## 代码演示

示例集合

  1. import { Flex, WhiteSpace } from 'antd-mobile';
  3. const PlaceHolder = (props) => (
  4.   <div style={{
  5.     backgroundColor: '#ebebef',
  6.     color: '#bbb',
  7.     textAlign: 'center',
  8.     height: '0.6rem',
  9.     lineHeight: '0.6rem',
  10.     width: '100%',
  11.   }} {...props}
  12.   >Item</div>
  13. );
  15. const FlexExample = React.createClass({
  16.   render() {
  17.     return (
  18.       <div className="flex-container">
  19.         <div className="title">基本</div>
  20.         <Flex>
  21.           <Flex.Item><PlaceHolder /></Flex.Item>
  22.           <Flex.Item><PlaceHolder /></Flex.Item>
  23.         </Flex>
  24.         <WhiteSpace size="lg" />
  25.         <Flex>
  26.           <Flex.Item><PlaceHolder /></Flex.Item>
  27.           <Flex.Item><PlaceHolder /></Flex.Item>
  28.           <Flex.Item><PlaceHolder /></Flex.Item>
  29.         </Flex>
  30.         <WhiteSpace size="lg" />
  31.         <Flex>
  32.           <Flex.Item><PlaceHolder /></Flex.Item>
  33.           <Flex.Item><PlaceHolder /></Flex.Item>
  34.           <Flex.Item><PlaceHolder /></Flex.Item>
  35.           <Flex.Item><PlaceHolder /></Flex.Item>
  36.         </Flex>
  37.         <WhiteSpace size="lg" />
  39.         <div className="title">wrap 换行</div>
  40.         <Flex wrap="wrap">
  41.           <PlaceHolder className="inline" />
  42.           <PlaceHolder className="inline" />
  43.           <PlaceHolder className="inline" />
  44.           <PlaceHolder className="inline" />
  45.           <PlaceHolder className="inline" />
  46.           <PlaceHolder className="inline" />
  47.           <PlaceHolder className="inline" />
  48.         </Flex>
  49.         <WhiteSpace size="lg" />
  51.         <div className="title">轴对齐方式</div>
  52.         <Flex justify="center">
  53.           <PlaceHolder className="inline" />
  54.           <PlaceHolder className="inline" />
  55.           <PlaceHolder className="inline" />
  56.         </Flex>
  57.         <WhiteSpace />
  58.         <Flex justify="end">
  59.           <PlaceHolder className="inline" />
  60.           <PlaceHolder className="inline" />
  61.           <PlaceHolder className="inline" />
  62.         </Flex>
  63.         <WhiteSpace />
  64.         <Flex justify="between">
  65.           <PlaceHolder className="inline" />
  66.           <PlaceHolder className="inline" />
  67.           <PlaceHolder className="inline" />
  68.         </Flex>
  70.         <WhiteSpace />
  71.         <Flex align="start">
  72.           <PlaceHolder className="inline" />
  73.           <PlaceHolder className="inline small" />
  74.           <PlaceHolder className="inline" />
  75.         </Flex>
  76.         <WhiteSpace />
  77.         <Flex align="end">
  78.           <PlaceHolder className="inline" />
  79.           <PlaceHolder className="inline small" />
  80.           <PlaceHolder className="inline" />
  81.         </Flex>
  82.         <WhiteSpace />
  83.         <Flex align="baseline">
  84.           <PlaceHolder className="inline" />
  85.           <PlaceHolder className="inline small" />
  86.           <PlaceHolder className="inline" />
  87.         </Flex>
  88.       </div>
  89.     );
  90.   },
  91. });
  93. ReactDOM.render(<FlexExample />, mountNode);
  1. .flex-container {
  2.   padding: 0.18rem;
  3. }
  4. .flex-container .title {
  5.   color: #888;
  6.   margin: 0.20rem 0;
  7. }
  8. .flex-container .inline {
  9.   width: 1.6rem!important;
  10.   margin: 0.18rem 0.18rem 0.18rem 0;
  11. }
  12. .flex-container .small {
  13.   height: 0.4rem!important;
  14.   line-height: 0.4rem!important;
  15. }
  16. ```

FlexFlex布局 - 图1

API ( 适用平台：WEB、React-Native )

Flex

成员说明类型默认值
direction子元素的排列方向，可选row,row-reverse,column,column-reverse,RN 仅支持row,columnStringrow
wrap子元素的换行方式，可选nowrap,wrap,wrap-reverse,RN 仅支持nowrap,wrapStringnowrap
justify子元素在主轴上的对齐方式，可选start,end,center,between,aroundStringstart
align子元素在交叉轴上的对齐方式，可选start/top,center/middle,end/bottom,baseline,stretch RN仅支持start,end,center,stretchStringcenter
alignContent(web only)有多根轴线时的对齐方式，可选start,end,center,between,around,stretchStringstretch

Flex.Item

Flex.Item 组件默认加上了样式flex:1,保证所有 item 平均分宽度, Flex 容器的 children 不一定是 Flex.Item