Flex Flex布局

CSS flex布局的封装。

flex

属性名描述类型默认值必选
direction项目定位方向，值可以为 row,row-reverse,column,column-reverseStringrowfalse
wrap子元素的换行方式，可选nowrap,wrap,wrap-reverseStringnowrapfalse
justify子元素在主轴上的对齐方式，可选start,end,center,between,aroundStringstartfalse
align子元素在交叉轴上的对齐方式，可选start,center,end,baseline,stretchStringcenterfalse
alignContent有多根轴线时的对齐方式，可选start,end,center,between,around,stretchStringstretchfalse

flex-item

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

示例

  1. {
  2.   "defaultTitle": "小程序AntUI组件库",
  3.   "usingComponents": {
  4.     "flex": "mini-antui/es/flex/index",
  5.     "flex-item": "mini-antui/es/flex/flex-item/index"
  6.   }
  7. }
  1. <view class="flex-container">
  2.   <view class="sub-title">Basic</view>
  3.   <flex>
  4.     <flex-item><view class="placeholder">Block</view></flex-item>
  5.     <flex-item><view class="placeholder">Block</view></flex-item>
  6.   </flex>
  7.   <view style="height: 20px;" />
  8.   <flex>
  9.     <flex-item><view class="placeholder">Block</view></flex-item>
  10.     <flex-item><view class="placeholder">Block</view></flex-item>
  11.     <flex-item><view class="placeholder">Block</view></flex-item>
  12.   </flex>
  13.   <view style="height: 20px;" />
  14.   <flex>
  15.     <flex-item><view class="placeholder">Block</view></flex-item>
  16.     <flex-item><view class="placeholder">Block</view></flex-item>
  17.     <flex-item><view class="placeholder">Block</view></flex-item>
  18.     <flex-item><view class="placeholder">Block</view></flex-item>
  19.   </flex>
  20.   <view className="sub-title">Wrap</view>
  21.   <flex wrap="wrap">
  22.     <view class="placeholder inline">Block</view>
  23.     <view class="placeholder inline">Block</view>
  24.     <view class="placeholder inline">Block</view>
  25.     <view class="placeholder inline">Block</view>
  26.     <view class="placeholder inline">Block</view>
  27.   </flex>
  28.   <view className="sub-title">Align</view>
  29.   <flex justify="center">
  30.     <view class="placeholder inline">Block</view>
  31.     <view class="placeholder inline">Block</view>
  32.     <view class="placeholder inline">Block</view>
  33.   </flex>
  34.   <flex justify="end">
  35.     <view class="placeholder inline">Block</view>
  36.     <view class="placeholder inline">Block</view>
  37.     <view class="placeholder inline">Block</view>
  38.   </flex>
  39.   <flex justify="between">
  40.     <view class="placeholder inline">Block</view>
  41.     <view class="placeholder inline">Block</view>
  42.     <view class="placeholder inline">Block</view>
  43.   </flex>
  44.   <flex align="start">
  45.     <view class="placeholder inline">Block</view>
  46.     <view class="placeholder inline small">Block</view>
  47.     <view class="placeholder inline">Block</view>
  48.   </flex>
  49.   <flex align="end">
  50.     <view class="placeholder inline">Block</view>
  51.     <view class="placeholder inline small">Block</view>
  52.     <view class="placeholder inline">Block</view>
  53.   </flex>
  54.   <flex align="baseline">
  55.     <view class="placeholder inline">Block</view>
  56.     <view class="placeholder inline small">Block</view>
  57.     <view class="placeholder inline">Block</view>
  58.   </flex>
  59. </view>
  1. .flex-container {
  2.   padding: 10px;
  3. }
  5. .sub-title {
  6.   color: #888;
  7.   font-size: 14px;
  8.   padding: 30px 0 18px 0;
  9. }
  11. .placeholder {
  12.   background-color: #ebebef;
  13.   color: #bbb;
  14.   text-align: center;
  15.   height: 30px;
  16.   line-height: 30px;
  17.   width: 100%;
  18. }
  20. .placeholder.inline {
  21.   width: 80px;
  22.   margin: 9px 9px 9px 0;
  23. }
  25. .placeholder.small {
  26.   height: 20px;
  27.   line-height: 20px
  28. }
  1. Page({});

原文: https://docs.alipay.com/mini/component-ext/flex