vue-h5移动Web的Flex布局

原创

我的代码呢 2023-10-07 10:15:14 ©著作权

文章标签 前端 vue.js javascript 默认值属性值 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者我的代码呢的原创作品，请联系作者获取转载授权，否则将追究法律责任

Flex布局

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

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

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

.box{
	display:flex;
}

行内元素也是可以使用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; // 旧版本语法
}

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，那么子元素将会占满整个容器的宽度；如果设置了高度和宽度，那么按照设置值显示子元素。该值为默认值。