全部产品
云市场
云游戏

布局(flex)

更新时间:2019-09-09 15:14:08

本文介绍 CSS flex 布局的封装(flex)。

flex

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

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. }
  4. .sub-title {
  5. color: #888;
  6. font-size: 14px;
  7. padding: 30px 0 18px 0;
  8. }
  9. .placeholder {
  10. background-color: #ebebef;
  11. color: #bbb;
  12. text-align: center;
  13. height: 30px;
  14. line-height: 30px;
  15. width: 100%;
  16. }
  17. .placeholder.inline {
  18. width: 80px;
  19. margin: 9px 9px 9px 0;
  20. }
  21. .placeholder.small {
  22. height: 20px;
  23. line-height: 20px
  24. }
  1. Page({});