通过flex进行网页布局的方法
小编给大家分享一下通过flex进行网页布局的方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
创新互联公司主营浈江网站建设的网络公司,主营网站建设方案,APP应用开发,浈江h5微信小程序开发搭建,浈江网站营销推广欢迎浈江等地区企业咨询
flex称为弹性布局,当父元素设置为flex值后子元素会自动成为其成员,再通过设置属性值来实现各种布局效果。例通过给父元素设置justify-content属性实现水平垂直居中效果
通过Flex可以简便、完整、响应式地实现各种页面布局。随着浏览器的发展,目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。接下来将和大家分享如何通过flex进行网页布局
flex布局
称为"弹性盒模型", 当父容器设置了display:flex时,子元素自动成为其成员, 容器默认存在两根轴:水平方向的主轴和垂直的交叉轴,项目默认沿主轴排列。
flex容器(父容器)的一些属性:
flex-direction:决定主轴的方向(即项目的排列方向)
flex-wrap:如果一条轴线排不下,如何换行
flex-flow:是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
justify-content:定义了项目在主轴上的对齐方式
align-items:定义项目在交叉轴上如何对齐
align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
实例
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: 200px; background:pink; }
效果图:
两列等高布局:
左边固定宽度,右边占据剩余宽度:
效果图:
看完了这篇文章,相信你对通过flex进行网页布局的方法有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
新闻标题:通过flex进行网页布局的方法
文章链接:http://scyanting.com/article/pspppg.html