网页布局之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布局是很方便布局的,虽然是个新东西,但是浏览器的发展,对其的支持也较好,建议在以后的设计中多去使用,一方面是潮流,另一方面,也是推动技术发展

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Spring相关

Vue中父组件向子组件传值

37510
来自专栏Ray学习笔记

Jump Start Bootstrap 第3章

在这一章,我们将开始使用Bootstrap的一些非常有用的HTML组件。诸如按钮、标题(headers)、导航菜单和评论系统的组件经常被用在网站上。通过组件,B...

14920
来自专栏web前端

Vuejs --01 起步

一、是什么      1、是一套构建用户界面的渐进式框架,Vue采用自底向上增量开发的设计           1.1     解释:框架譬如angular,是...

23750
来自专栏吾爱乐享

php学习之html的标签属性(三)

14720
来自专栏mySoul

多媒体编程

由于要实现图片翻转,需要较高的响应度,此时需要进行缓存,new一个Image对象创建一个HTMLImageElement对象实例

15510
来自专栏三十课

【基础】CSS实现多重边框的5种方式

目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案...

50450
来自专栏逸鹏说道

03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1...

30980
来自专栏hbbliyong

基于Three.js的360度全景--photo-sphere-viewer--简介

这个是基于three.js的全景插件  photo-sphere-viewer.js  ————————————————————————————————————...

91790
来自专栏企鹅号快讯

前端小知识:为什么你写的 height:100% 不起作用?

作者:JiaXinYi https://segmentfault.com/a/1190000012707337 这个知识不算冷门的,但是用的时候可能还是会有些懵...

22050
来自专栏web前端

03 弹性盒模型

一、Flex布局(新版弹性盒模型)      1、是什么           flexible box 弹性盒模型     注意:设成flex布局之后,子元素的...

20590

扫码关注云+社区

领取腾讯云代金券