Flex弹性布局
传统布局与flex布局
传统布局
*兼容性好
*布局繁琐
*局限性,不能再移动端很好的布局
flex弹性布局
*操作简单,布局极为简单,移动端应用很广泛
*PC端浏览器支持情况较差
*ie 11或更低版本,不支持或仅部分支持
建议:
1、如果是PC端页面布局,我们还是传统布局。
2、如果是移动端或者不考虑兼容性问题和PC端页面布局,我们还是使用flex弹性布局
flex布局原理
*伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
flex可以让div盒子垂直居中
Flex布局父级常见属性
1、主轴与侧轴
在flex布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x轴和y轴
*默认主轴方向就是x轴方向,水平向右
*默认侧轴方向就是y轴方向,水平向下
1.1 flex-direction设置主轴的方向
2.2 justify-content设置主轴上的子元素排列方式
注意:使用这个属性之前一定要确定好主轴是哪个
可以使div盒子垂直居中(但会破坏排列方式)
2.3 flex-wrap 设置子元素是否换行
默认情况下,项目都排在一条线上。
2.4 align-items设置侧轴上的子元素排列方式(单行)
控制子项在侧轴(默认是y轴)上的排列方式,在子项为单项的时候使用
stretch 拉伸,但是子盒子不要给高度
2.5 align-content设置侧轴上的子元素排列方式(多行)
设置子项在侧轴上的排列方式,并且只能用于子项出现换行的情况(多行),在单行下是没有效果的。
2.6 flex-flow
flex-flow 属性是flex-direction和flex-wrap属性的复合属性
Flex布局子项常见属性
1、flex属性
flex属性定义子项目分配剩余空间,用flex来表示占多少份数
.item{
flex:<number>;
}
(淘宝)圣杯布局:
flex:1;
2、align-self控制子项自己在侧轴上的排列方式
align-self属性允许当个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。
默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
3、order属性定义项目的排列顺序
数值越小,排列越靠前,默认为0。
背景线性渐变
语法:
原文地址:https://blog.csdn.net/qq_45077122/article/details/114493269
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。