Flex Flex布局

Flex 是 CSS flex 布局的一个封装。

代码演示

基本示例

基础使用 

  1. import { Flex, WhiteSpace } from 'antd-mobile';
  3. const PlaceHolder = props => (
  4.   <div
  5.     style={{
  6.       backgroundColor: '#ebebef',
  7.       color: '#bbb',
  8.       textAlign: 'center',
  9.       height: '0.6rem',
  10.       lineHeight: '0.6rem',
  11.       width: '100%',
  12.     }}
  13.     {...props}
  14.   >Item</div>
  15. );
  17. const FlexExample = () => (
  18.   <div className="flex-container">
  19.     <div className="sub-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="sub-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="sub-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. );
  91. ReactDOM.render(<FlexExample />, mountNode);
  1. .flex-container {
  2.   margin: 0 0.30rem;
  3. }
  4. .flex-container .inline {
  5.   width: 1.6rem!important;
  6.   margin: 0.18rem 0.18rem 0.18rem 0;
  7. }
  8. .flex-container .small {
  9.   height: 0.4rem!important;
  10.   line-height: 0.4rem!important;
  11. }
  12. .sub-title {
  13.   color: #888;
  14.   font-size: .28rem;
  15.   padding: 30px 0 18px 0;
  16. }
  17. ```

FlexFlex布局 - 图1

API

适用平台：WEB、React-Native

Flex

属性说明类型默认值
directionhow flex items are placed in the flex container，value could be 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,center,end,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