All Products
Search
Document Center

Flex

Last Updated: Feb 04, 2021

This section describes CSS flex wrap.

flex

Property Description Type Default value Mandatory
direction Project positioning direction. The value can be row, row-reverse, column, or column-reverse. String row false
wrap Line-wrap method of the child element . The value can be nowrap, wrap, or wrap-reverse. String nowrap false
justify Alignment method on the main axis of the child element. The value can be start, end, center, between, and around. String start false
align Alignment method on cross axes of the child element. The value can be start, center, end, baseline, and stretch. String center false
alignContent Alignment method on multiple axes. The value can be start, end, center, between, around, and stretch. String stretch false

flex-item

The style flex:1 is added for the flex-item component by default to ensure that all items are equally divided in width. The children of the flex container may not be flex-item.

Sample code

  1. {
  2. "defaultTitle": "AntUI component library of the Mini Program",
  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({});