<!--pages/flex/flex.wxml-->
<view class="outer">
<view class="inner">1</view>
<view class="inner">2</view>
</view>
/* pages/flex/flex.wxss */
.outer{
height: 320rpx;
width: 600rpx;
background: pink;
display: flex;
justify-content: space-around
}
.inner
{
height: 100rpx;
width: 100rpx;
background: grey;
border: 1rpx solid white;
box-sizing: border-box
}
------------------------------------------------------------------------------------
justify-content
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
align-items
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
margin(外边距)，边框外的区域，外边距是透明的；
border(边框)，围绕在内边距和内容外的部分；
padding（内边距），填充属性，是指内容周围的区域，内边距也是透明的；
content（内容），盒子的实际内容，用于展示页面组件。
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap 属性用于指定弹性盒子的子元素换行方式。
.outer{
width: 600rpx;
background: pink;
display: flex;
justify-content: left;
align-items: rows;
flex-direction: row;
flex-wrap: wrap;
}
.inner
{
height: 200rpx;
width: 200rpx;
background: grey;
border: 1rpx solid white;
box-sizing: border-box
}
<!--pages/flex/flex.wxml-->
<view class="outer">
<view class="inner">1</view>
<view class="inner">2</view>
<view class="inner">3</view>
<view class="inner">4</view>
</view>
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。