小程序中，view类似于正常Html中的div标签，只是在小程序中，view是一个组件

<view class="chunk color1"/>
<view class="chunk color2"/>
<view class="chunk color3"/>

.chunk {
    width: 100rpx;
    height: 100rpx;
}
.color1 {
    background-color: #f00;
}
.color2 {
    background-color: #ff0;
}
.color3 {
    background-color: #00f;
}

出现的效果如下：

假如说，现在的需求是将上面的三个view排列在一行显示，此时，思路可能有这几种，分别是：浮动，view设置成inline或者inline-block.

浮动 -> 清浮动

inline -> 无法设置宽高

inline-block -> 中间有间隙

上面的三种方式确实可以做到，但是或多或少的都存在的各自的问题和弊端，有木有一种比较方便比较简洁的方式来实现目的

答案是有的，那就是flex

<view class="container">
    <view class="chunk color1"/>
    <view class="chunk color2"/>
    <view class="chunk color3"/>
</view>

.container {
    display: flex;
}
.chunk {
    width: 100rpx;
    height: 100rpx;
}
.color1 {
    background-color: #f00;
}
.color2 {
    background-color: #ff0;
}
.color3 {
    background-color: #00f;
}

可以看到，此时就达到了我们想要的效果，排在一行了。

不难看出，flex是一个类似容器的概念，外面包了一个容器设置成了flex，其里面的元素块状标签的属性消失了，而里面的块状标签此时无须再手动设置display:inline-block了，即使手动给里面的元素设置display:block,此时也是无效的

flex不仅仅在小程序中使用，在我们H5的页面布局中都是可以使用的，但是，由于兼容性不是很好，唯有在小程序中可以做到很好的兼容（微信提供了统一的环境）,在H5中的使用需要考虑到兼容性，低版本的安卓机也会有兼容性问题。