Flex

2022-07-29 06:32

CSS flex layout encapsulation

Sample Code

copy

    {
      "defaultTitle": "Mini Program AntUI component library",
      "usingComponents": {
        "flex": "mini-antui/es/flex/index",
        "flex-item": "mini-antui/es/flex/flex-item/index"
      }
    }

copy

    <view class="flex-container">
      <view class="sub-title">Basic</view>
      <flex>
        <flex-item><view class="placeholder">Block</view></flex-item>
        <flex-item><view class="placeholder">Block</view></flex-item>
      </flex>
      <view style="height: 20px;" />
      <flex>
        <flex-item><view class="placeholder">Block</view></flex-item>
        <flex-item><view class="placeholder">Block</view></flex-item>
        <flex-item><view class="placeholder">Block</view></flex-item>
      </flex>
      <view style="height: 20px;" />
      <flex>
        <flex-item><view class="placeholder">Block</view></flex-item>
        <flex-item><view class="placeholder">Block</view></flex-item>
        <flex-item><view class="placeholder">Block</view></flex-item>
        <flex-item><view class="placeholder">Block</view></flex-item>
      </flex>
      <view className="sub-title">Wrap</view>
      <flex wrap="wrap">
        <view class="placeholder inline">Block</view>
        <view class="placeholder inline">Block</view>
        <view class="placeholder inline">Block</view>
        <view class="placeholder inline">Block</view>
        <view class="placeholder inline">Block</view>
      </flex>
      <view className="sub-title">Align</view>
      <flex justify="center">
        <view class="placeholder inline">Block</view>
        <view class="placeholder inline">Block</view>
        <view class="placeholder inline">Block</view>
      </flex>
      <flex justify="end">
        <view class="placeholder inline">Block</view>
        <view class="placeholder inline">Block</view>
        <view class="placeholder inline">Block</view>
      </flex>
      <flex justify="between">
        <view class="placeholder inline">Block</view>
        <view class="placeholder inline">Block</view>
        <view class="placeholder inline">Block</view>
      </flex>
      <flex align="start">
        <view class="placeholder inline">Block</view>
        <view class="placeholder inline small">Block</view>
        <view class="placeholder inline">Block</view>
      </flex>
      <flex align="end">
        <view class="placeholder inline">Block</view>
        <view class="placeholder inline small">Block</view>
        <view class="placeholder inline">Block</view>
      </flex>
      <flex align="baseline">
        <view class="placeholder inline">Block</view>
        <view class="placeholder inline small">Block</view>
        <view class="placeholder inline">Block</view>
      </flex>
    </view>

copy

    .flex-container {
      padding: 10px;
    }
    
    .sub-title {
      color: #888;
      font-size: 14px;
      padding: 30px 0 18px 0;
    }
    
    .placeholder {
      background-color: #ebebef;
      color: #bbb;
      text-align: center;
      height: 30px;
      line-height: 30px;
      width: 100%;
    }
    
    .placeholder.inline {
      width: 80px;
      margin: 9px 9px 9px 0;
    }
    
    .placeholder.small {
      height: 20px;
      line-height: 20px
    }

copy

    Page({});

Attributes

Attribute Name	Description	Type	Default	Mandatory
direction	Direction of item, including row, row-reverse, column and olumn-reverse	String	row	false
wrap	Sub-elementwrap mode, including nowrap, wrap and rap-reverse	String	nowrap	false
justify	Sub-elementjustify on main axis, including start, end, center, between and around	String	start	false
align	Sub-element justify on cross axis, including start, center, end, baseline and stretch	String	center	false
alignContent	Sub-element justify on multiple axises, including start, end, center, between, around and stretch	String	stretch	false

Flex-item

The flex-item component has a default style flex:1, which ensures all items have equal width. The children of the flex container may not be a flex-item.