一、容器的属性
以下6个属性设置在容器上。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
注意：使用每个属性都记得开启display:flex; 盒子伸缩模式，默认左浮动。
1、flex-direction
明确排列起点继续添加元素的排列的方向，分水平排列和垂直排列
案例
（1）、起点在左端（row），继续添加元素时往右边排列。
（2）、起点在右端（row-reverse），继续添加元素时向左排列。
（3）、起点在上沿（column），继续添加元素时往下排列。
（4）、起点在下沿（column-reverse），继续添加元素时向上排列。
2、flex-wrap
默认情况下<view></view>标签直接包裹着的每个元素都要换行显示。
2.1、文本——没有空格
（1）、不换行默认（nowrap）
（2）、换行，第一行在上方（wrap）
（3）、换行，第一行在下方（wrap-reverse）
2.2、文本——有空格
（1）、不换行默认（nowrap）
（2）、换行，第一行在上方（wrap）
同上
（3）、换行，第一行在下方（wrap-reverse）
同上
2.3、组件
按钮默认换行显示，这里调整成不换行显示。
下面是研究组合左浮动效果：
给外层加上类d
3、flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。此处表示由下至上，不换行排列。
4、justify-content（项目在主轴上的对齐方式）
flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端space-around：项目两侧的间隔相等
（1）、默认左对齐（flex-start）
（2）、居中（center）
（3）、右对齐（flex-end）
（4）、两端对齐，项目之间的间隔都相等（space-between）
（5）、每个项目两侧的间隔相等（space-around）
5、align-items（项目在交叉轴上的对齐方式）
flex-start（默认值）：左对齐flex-end：右对齐center： 居中baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
（1）、默认左对齐（flex-start）
（2）、居中（center）
（3）、右对齐（flex-end）
（4）、基线对齐（baseline）
（5）、沾满（stretch）
6、align-content（多根轴线的对齐方式）
微信小程序
