image 微信小程序flex_微信小程序-你选我选之flex弹性盒模型

上一节我们说到了，flex布局，何为flex布局，就是一种一维布局模型，一次只能处理一个维度(一行或者一列)上的元素布局，flex布局大部分的属性都是作用于主轴的。

这一节，来说说flex弹性盒模型。其实，要想具有flex弹性布局的特性，就得对这个元素声明display: flex，同时这个元素就成为了弹性容器。

图一

1，蓝色部分为弹性容器，声明了：display:flex。每个弹性容器都有两根轴：主轴/交叉轴，两轴之间成90度。

2，主轴/交叉轴均有起点和终点，这对于元素的对齐非常重要。

3，弹性容器中的所有子元素称为“弹性元素”(如图中2个弹性元素)注意是弹性元素永远沿主轴排列。

4，弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。(如图2)

图二

图一的弹性容器变成了图二的弹性元素。这就形成了嵌套的弹性容器模型。以上就是flex弹性盒模型的介绍了，下一节我们将通过代码来实现一下。欢迎大家关注一下微信小程序-你选我选给大家一个更直观的展示。