页面布局有几种方法,flex布局优缺点
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了页面布局有几种方法,flex布局优缺点相关的知识,希望对你有一定的参考价值。
参考技术A 1.静态布局:传统布局,屏幕宽高变化时,盒子使用横向或者竖向的滚动条来查看被遮挡部分,也就是不管浏览器窗口的大小怎么变化就按html语义标签排列的布局来布置。
2.弹性布局:
css3引入的,flex布局;优点在于其容易上手,根据flex规则很容易达到某个布局效果,然而缺点是:浏览器兼容性比较差,只能兼容到ie9及以上;
3.自适应布局:
分别为不同的屏幕分辨率定义布局,在每个布局中,页面元素不随窗口大小的调整而发生变化,当窗口大小到达一定分辨率时变化一次。
4.流式布局:
页面元素的宽度按照屏幕进行适配调整,元素的位置不变,大小变化,屏幕太大或者太小导致元素不能正常显示。
5.响应式布局:
<meta name="viewport" content="divice-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
使用meta标签设置,页面元素宽度随窗口调整自动适配。主要属性及其含义如下:name="viewport": 名称=视图;width=device-width 页面宽度=设备宽度(可以理解为获取你手机的屏幕宽度);initial-scale - 初始的缩放比例 ;minimum-scale - 允许用户缩放到的最小比例 ;maximum-scale - 允许用户缩放到的最大比例 ;user-scalable - 用户是否可以手动缩放 。
6.网格布局:grid
二维布局系统,随意的定义每行每列的数目和大小。也非常简单方便,兼容性较差。
元素居中之Flex布局
在做页面布局的时候,多多少少都会遇到这个话题,如何使子元素居中于父元素中???
对于这个问题,方法多种多样,之前也有对这个问题进行总结过,answer应该不少于10种吧。至于使用哪种方法比较好,我觉得这很大程度看个人喜好。
我经常使用的最多也就是一下几种:(以最简单的结构举例,元素宽高略 )
<div class=‘parent‘> <div class=‘‘child></div> </div>
1、定位
.parent{ position:relative; } .child{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; }
2、定位+transform
.parent{ position:relative; } .child{ position:absolute; top:50%; right:50%; transform:translate(-50%,-50%); }
3、height +line-height
.parent{ height: 100px; } .child{ line-height: 100px; }
4、table
.parent{ display: table-cell; vertical-align: middle; } .child{ margin:auto; }
。。。。
以上方法其实已经足够应付日常中如何使元素居中这个问题,but,早前听说过有一种新布局,可以更加优雅的解决这个问题,那就是flex布局。
其实flex布局已经不是什么新鲜的事物了,早在2009年,W3C就提出了一种新方案,但是由于各种浏览器兼容性的问题,这种方案一直没有推广开来。记得很在早前就有使用过一个叫swiper的移动端插件,看了其中的源代码,发现它里面就使用了flex布局,草草看了一下,也知道大概意思,但是之后的项目一直没有机会使用,我也就没有再关注过。前端时间去看看这种方案的兼容性,95%以上已经完美支持这种解决方案了。so。。。可以大胆的使用了。
flex布局也叫弹性布局,相比传统的布局以及bootstrap的栅格布局,flex布局显得更加的灵活,代码写起来也更加的优雅。
直接插入主题,怎么使用flex使元素居中?
首先先明确基本概念:任何的容器都可以指定flex布局,容器里面的子元素自动成为容器的成员,也叫项目,flex item
.parent{ display: flex; display: -webkit-flex; justify-content:center; align-items:center; }
简单几行,就可以使子元素完全居中于父元素中了。。。
接下来,再看看flex布局的其他使用情况。
我们可以把弹性布局想成一个可以朝四个方向拉伸的盒子。
容器元素有六个属性,分别是:
flex-direction
决定项目元素的排列方向,一般有四个值
row(默认值,主轴为水平方向,起点是左端,其他见名知意) | row-reverse | column | column-reverse;
flex-wrap
决定项目元素都在一条线上,一般有三个取值
nowrap(默认值,不换行) | wrap | wrap-reverse;
flex-flow
flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
。
justify-content
定义了项目在主轴上的对齐方式。
flex-start (默认值):左对齐| flex-end | center | space-between | space-around;
align-items
定义项目在交叉轴上如何对齐。
align-content
定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
。
。
。
对于这类的学习,平时用到的时候,再去查对应的属性应用就可以了,更重要的是在学习一项新的东西之后,慢慢加入自己的体会,没在实践中去总结。
以上是关于页面布局有几种方法,flex布局优缺点的主要内容,如果未能解决你的问题,请参考以下文章