Flex Flex布局

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

代码演示

基本示例

基础使用 

  1. import { Flex, WhiteSpace } from 'antd-mobile';
  3. const PlaceHolder = ({ className = '', ...restProps }) => (
  4.   <div className={`${className} placeholder`} {...restProps}>Block</div>
  5. );
  7. const FlexExample = () => (
  8.   <div className="flex-container">
  9.     <div className="sub-title">Basic</div>
  10.     <Flex>
  11.       <Flex.Item><PlaceHolder /></Flex.Item>
  12.       <Flex.Item><PlaceHolder /></Flex.Item>
  13.     </Flex>
  14.     <WhiteSpace size="lg" />
  15.     <Flex>
  16.       <Flex.Item><PlaceHolder /></Flex.Item>
  17.       <Flex.Item><PlaceHolder /></Flex.Item>
  18.       <Flex.Item><PlaceHolder /></Flex.Item>
  19.     </Flex>
  20.     <WhiteSpace size="lg" />
  21.     <Flex>
  22.       <Flex.Item><PlaceHolder /></Flex.Item>
  23.       <Flex.Item><PlaceHolder /></Flex.Item>
  24.       <Flex.Item><PlaceHolder /></Flex.Item>
  25.       <Flex.Item><PlaceHolder /></Flex.Item>
  26.     </Flex>
  27.     <WhiteSpace size="lg" />
  29.     <div className="sub-title">Wrap</div>
  30.     <Flex wrap="wrap">
  31.       <PlaceHolder className="inline" />
  32.       <PlaceHolder className="inline" />
  33.       <PlaceHolder className="inline" />
  34.       <PlaceHolder className="inline" />
  35.       <PlaceHolder className="inline" />
  36.       <PlaceHolder className="inline" />
  37.       <PlaceHolder className="inline" />
  38.     </Flex>
  39.     <WhiteSpace size="lg" />
  41.     <div className="sub-title">Align</div>
  42.     <Flex justify="center">
  43.       <PlaceHolder className="inline" />
  44.       <PlaceHolder className="inline" />
  45.       <PlaceHolder className="inline" />
  46.     </Flex>
  47.     <WhiteSpace />
  48.     <Flex justify="end">
  49.       <PlaceHolder className="inline" />
  50.       <PlaceHolder className="inline" />
  51.       <PlaceHolder className="inline" />
  52.     </Flex>
  53.     <WhiteSpace />
  54.     <Flex justify="between">
  55.       <PlaceHolder className="inline" />
  56.       <PlaceHolder className="inline" />
  57.       <PlaceHolder className="inline" />
  58.     </Flex>
  60.     <WhiteSpace />
  61.     <Flex align="start">
  62.       <PlaceHolder className="inline" />
  63.       <PlaceHolder className="inline small" />
  64.       <PlaceHolder className="inline" />
  65.     </Flex>
  66.     <WhiteSpace />
  67.     <Flex align="end">
  68.       <PlaceHolder className="inline" />
  69.       <PlaceHolder className="inline small" />
  70.       <PlaceHolder className="inline" />
  71.     </Flex>
  72.     <WhiteSpace />
  73.     <Flex align="baseline">
  74.       <PlaceHolder className="inline" />
  75.       <PlaceHolder className="inline small" />
  76.       <PlaceHolder className="inline" />
  77.     </Flex>
  78.   </div>
  79. );
  81. ReactDOM.render(<FlexExample />, mountNode);
  1. .flex-container {
  2.   margin: 0 15px;
  3. }
  4. .flex-container .inline {
  5.   width: 80px!important;
  6.   margin: 9px 9px 9px 0;
  7. }
  8. .flex-container .small {
  9.   height: 20px!important;
  10.   line-height: 20px!important;
  11. }
  12. .sub-title {
  13.   color: #888;
  14.   font-size: 14px;
  15.   padding: 30px 0 18px 0;
  16. }
  17. .placeholder {
  18.   background-color: #ebebef;
  19.   color: #bbb;
  20.   text-align: center;
  21.   height: 30px;
  22.   line-height: 30px;
  23.   width: 100%;
  24. }

FlexFlex布局 - 图1

API

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,center,end,baseline,stretch RN仅支持start,end,center,stretchStringcenter
alignContent有多根轴线时的对齐方式，可选start,end,center,between,around,stretchStringstretch

Flex.Item

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