网页布局之flex布局的使用
时间:2022-06-11
本文章向大家介绍网页布局之flex布局的使用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.引言
Flex布局方案很早都提出来了,然后可以简便、完整、响应式地实现各种页面布局。随着浏览器的发展,目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。.
2.网页布局方案
在网页设计过程中,水平垂直居中是很常用的,但是传统的方案使用起来分厂费劲,下面来看flex如何实现
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
display: flex;
width: 100%;
height: 100%;
background: #eee;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 300px;
background: yellowgreen;
}
<body>
<div class="box"></div>
</body>
如此看来这样水平垂直居中是不是很方便的实现了,
3.什么是flex布局?
意为"弹性盒模型",用来为盒状模型提供最大的灵活性。Webkit 内核的浏览器,必须加上-webkit前缀。 当父容器设置了display:flex时。子元素自动成为其成员, 容器默认存在两根轴:水平方向的主轴和垂直的交叉轴,项目默认沿主轴排列。
3.1flex容器(父容器)的一些属性:
//属性决定主轴的方向(即项目的排列方向)
flex-direction
//默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行
flex-wrap
//flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
flex-flow
//属性定义了项目在主轴上的对齐方式。
justify-content
//属性定义项目在交叉轴上如何对齐。
align-items
//属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
align-content
3.2flex项目(子元素)的一些属性
//定义项目的排列顺序。数值越小,排列越靠前,默认为0。
order
//定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-grow
//flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-shrink
//定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
flex-basis
//flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选
flex
//允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
align-self
4.总结
css3中的flex布局是很方便布局的,虽然是个新东西,但是浏览器的发展,对其的支持也较好,建议在以后的设计中多去使用,一方面是潮流,另一方面,也是推动技术发展
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 科学与艺术的融合:遗传算法绘制蒙娜丽莎
- “工业听诊”中多声源事件检测与定位
- 工业党福利:使用PaddleX高效实现指针型表计读取系列文章(2)
- 【三维点云系列】PCL点云库之数据文件与IO操作
- Jvm故障处理工具
- 递增子序列
- redis学习(二)
- You-Get 使用方法
- 接口测试 Mock 实战 | 结合 jq 完成批量化的手工 Mock
- 在Angular应用的child Component里同时使用@Input和@Output
- Angular应用里的@Input和@Output注解使用方法介绍
- K8S Ingress使用|常见问题列表
- 部署Tomcat及负载均衡
- Jenkins常用插件Publish Over SSH
- Zabbix 4.0配置监控Linux客户端