微信小程序（Flex布局-容器属性）

（1）盒模型

分类：IE盒模型，标准盒模型。
区别：宽高计算方式不同。

前言：
微信小程序 View视图标签支持两种布局方式：Block 和 Flex
注意：
所有 View 默认都是 block浮动布局，所以如果要使用 flex 布局的话需要进行显式声明。

（2）容器与项目元素

容器：
日常开发中，采用flex布局的元素，一般简称为“容器”。
项目/元素：
容器内的元素简称为“项目”或者“元素”。

（3）主轴与交叉轴

水平方向的是主轴（main axis），垂直方向的是交叉轴（cross axis）。

（4）容器与项目元素

布局属性：
容器属性：flex-flow、flex-direction、flex-wrap、justify-content、align-items、align-content
元素/项目属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self

目的：为方便适配不同大小的内容区域。

♤♤容器属性♤♤
①弹性盒模型display:flex;

②元素的排列方向flex-direction:row（默认值） | row-reverse | column |column-reverse

③元素是否换行flex-wrap:nowrap（默认值） | wrap | wrap-reverse

④项目元素在主轴上的对齐方式justify-content:flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly

⑤元素在交叉轴的对齐方式align-items:stretch（默认值） | center | flex-end | baseline | flex-start

⑥多行元素在交叉轴的对齐方式align-content:stretch（默认值） | flex-start | center |flex-