vue-h5移动Web的Flex布局

Flex布局

Flexible布局，也就是弹性布局。
Flexible的优点是，不需要对元素设置固定的宽度和高度，元素的位置和大小也会跟着父元素或者浏览器的状态来自动适配。

同时还添加了水平居中和垂直居中的解决方案。

在页面中指定一个元素作为Flex布局，那么这个元素就是作为容器冤元素。设置如下：

.box{
	display:flex;
}
1
2
3

行内元素也是可以使用flex布局的。

注意：父元素设置为flex后，子元素的float、clear和vertical-align的设置就会失效。

Flex的兼容性写法

尽管有很多的浏览器已经实现了无前缀的版本，但是在系统比较旧版本的移动端设备上，只能带上前缀。

那么，我们在写代码的时候，就要考虑样式的兼容性了：

.box{
	display:-webkit-flex; // 新版本语法加前缀
	display:flex; // 新版本语法
	display:-webkit-box; // 旧版本语法
}

.children{
	-webkit-flex:1; // 新版本语法加前缀
	flex:1; // 新语法
	-webkit-box-flex:1; // 旧版本语法
}
1
2
3
4
5
6
7
8
9
10
11

Flex容器属性

弹性容器有两个方向：水平方向和垂直方向，弹性容器的子元素默认沿着水平方向排列。Flex容器有这些属性：

1、flex-direction

该属性决定主轴的方向；属性值如下：

• row：表示设置主轴为水平方向，从左到右，该值为默认值
• row-reverse：表示设置主轴为水平方向，从右到左
• column：表示设置主轴为垂直方向，从上到下
• column：表示设置主轴为垂直方向，从上到下

2、flex-wrap

该属性决定如果一条轴线排列时内容超出，那么该如何换行；属性值如下：

• nowrap：表示单行显示，不换行，该值为默认值
• wrap：表示内容超出容器宽度时换行显示，第一行在上方
• wrap-reverse：表示内容超出容器宽度时换行显示，但是从下往上开始，也就是第一行在最下方，最后一行在最上方

3、flex-flow

该属性是flex-direction和flex-wrap的缩写，即一个属性可以实现设置两个属性的功能。

4、justify-content

该属性决定了主轴方向上子元素的对齐和分布方式；属性值如下：

• flex-start：表示主轴方向左对齐，该值为默认值
• flex-end：表示主轴方向右对齐
• center：表示主轴方向居中对齐
• space-between：表示主轴方向两端对齐，子元素之间的间隔都相等，多余的空白间距只在子元素中间区域分配
• space-around：表示主轴方向距容器两侧的间隔相等

5、align-items

该属性决定了交叉轴方向上子元素的对齐和分布方式；属性值如下：

• flex-start：表示子元素在容器交叉轴方向顶部对齐
• flex-end：表示子元素在容器交叉轴方向底部对齐
• center：表示子元素在容器交叉轴方向居中对齐
• baseline：表示所有子元素都相对第一行文字的基线（字母x的下边缘）对齐。
• stretch：表示子元素拉伸，如果主轴是水平方向，且该子元素未设置高度或者把高度设置为auto，那么子元素将会占满整个容器的高度；如果主轴是垂直方向，且该子元素未设置宽度或者把宽度设置为auto，那么子元素将会占满整个容器的宽度；如果设置了高度和宽度，那么按照设置值显示子元素。该值为默认值。

6、align-content

该属性决定了多根轴线的对齐方式。如果容器只有一根轴线，那么该属性不起作用；属性值为：

• flex-start：表示子元素在容器交叉轴方向顶部对齐
• flex-end：表示子元素在容器交叉轴方向底部对齐
• center：表示子元素在容器交叉轴方向整体居中对齐
• space-between：表示子元素在容器交叉轴方向两端对齐，剩下每一行子元素等分剩余的空间
• space-around：表示子元素在容器交叉轴方向上两侧的间距都相等，且位于起点和终点的元素与容器边框的间距为两侧间距的1/2
• stretch：表示每一行子元素都拉伸，是align-content的默认值。

Flex容器元素的子元素，有以下几个属性：

1. order：该属性决定子元素的排列顺序
2. flex-grow：该属性决定子元素的放大比例
3. flex-shrink：该属性决定子元素的缩小比例
4. flex-basis：该属性决定在分配多余空间之前，子元素占据的主轴空间的大小
5. flex：该属性是复合属性，由flex-grow、flex-shrink和flex-basis组成
6. align-self：该属性决定了子元素与其他子元素不一样的排列和对齐方式