页面布局有几种方法，flex布局优缺点

Posted 2023-05-09

参考技术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

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

。

。

。

对于这类的学习，平时用到的时候，再去查对应的属性应用就可以了，更重要的是在学习一项新的东西之后，慢慢加入自己的体会，没在实践中去总结。