通过flex进行网页布局的方法-创新互联

小编给大家分享一下通过flex进行网页布局的方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

我们提供的服务有:做网站、网站建设、微信公众号开发、网站优化、网站认证、大方ssl等。为近1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的大方网站制作公司

flex称为弹性布局,当父元素设置为flex值后子元素会自动成为其成员,再通过设置属性值来实现各种布局效果。例通过给父元素设置justify-content属性实现水平垂直居中效果

通过Flex可以简便、完整、响应式地实现各种页面布局。随着浏览器的发展,目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。接下来将和大家分享如何通过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进行网页布局的方法

看完了这篇文章,相信你对通过flex进行网页布局的方法有了一定的了解,想了解更多相关知识,欢迎关注创新互联网站制作公司行业资讯频道,感谢各位的阅读!


本文名称:通过flex进行网页布局的方法-创新互联
文章位置:http://myzitong.com/article/didjdp.html