Flex

2021-07-21 11:23

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

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

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.