微信小程序之伸缩布局Flex08

微信小程序之伸缩布局Flex08

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

以前在网页开发过程中，布局一直是不可或缺的，从最早的表格布局，到后来的DIV+CSS布局，现在再到CSS3的伸缩布局。

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

如下图：

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

使用说明

1. 指定一个父盒子为伸缩盒子，即指定：display: flex

2. 明确你需要的主侧轴方向，并设置flex-direction 默认是row ，纵向是column

3. 设置父盒子的属性来调整子元素的布局，例如align-items

4. 设置子盒子的宽高或者比例，完成具体的子元素在父盒子中的布局

各个属性介绍

1. flex-direction调整主轴方向（默认为水平方向）

2. justify-content调整主轴对齐

3. align-items调整侧轴对齐（子元素可以使用align-self覆盖）

4. flex-wrap控制是否换行

5. align-content堆栈（由flex-wrap产生的独立行）对齐

6. flex-flow是flex-direction + flex-wrap的简写形式

7. flex是子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

8. order控制子项目的排列顺序，正序方式排序，从小到大

此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值可参考示例源码。