页面常见布局以及实现方法--flex

时间 2019-11-11

标签页面常见布局以及实现方法 flex 栏目 Flex 繁體版

原文原文链接

页面布局是前端工程师的基本功之一，总结分析各类布局实现方法，可让本身快速定位哪一种方法实现功能，同时能够作到现最大程度的兼容。javascript

1、水平居中css

假设：最基本机构 .parent>.childhtml

一、行内元素、文本元素、行内块元素前端

.parent{
    text-align: center;
}

说明：只对行内元素有效；属性会继承影响到后代行内元素；java

二、单个块级元素ios

#child{
    width: 200px; /*必须定宽*/
    margin: 0 auto;
}

说明：child必须定宽，而且值不能为auto；宽度要小于父元素，不然无效.web

三、多个块级元素bootstrap

.parent{
    text-align: center;
}
.child{
    display: inline-block; 
}

说明：只对行内内容有效；属性会继承影响到后代行内内容；　　浏览器

四、定位+transform/定位+margin前端工程师

#parent{
    height: 200px;
    width: 200px;  
    position: relative; 
}
#son{
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    /*margin-left: -50px;*/
    width: 100px;  
    height: 100px;
}

说明：　主要是transform兼容性很差，须要加上各类浏览器内核前缀；

五、flex布局

.parent{
    display: flex;
    justify-content: center;
}

说明：flex兼容性问题，比较合适用于移动端开发。

2、垂直居中

假设：最基本机构 .parent>.child

一、行内元素、文本元素、行内块元素

.parent{
    height: 100px;
    line-height: 100px;
}

说明：比较试用单行的内容

二、多行文本

.parent{
    height: 100px;
    line-height: 50px;
}

三、table-cell(单个块级元素)

.parent{
    display: table-cell;
    vertical-align: middle;
}

四、定位+transform/定位+margin

和上面水平定位差很少，只是换了一个轴；　

五、flex布局

parent{
    display: flex;
    align-items: center;
}

或

.parent{
    display: flex;
}
.child{
    align-self: center;
}

说明：仍是兼容性的缺点　

3、水平垂直居中

<div class='parent'>
    <div class=''child></div> 
</div>

一、定位

.parent{
  position:relative;  
}
.child{
   position:absolute;
   top:0;
   right:0;
   bottom:0;
   left:0;
   margin:auto;
}

二、定位+transform

.parent{
  position:relative;  
}
.child{
   position:absolute;
   top:50%;
   right:50%;
   transform:translate(-50%,-50%);
}

三、text-align+height +line-height

.parent{
  text-align:center;
  height: 100px; 
}
.child{
  line-height: 100px;
}

四、table-cell

.parent{
    display: table-cell;
    vertical-align: middle;
}
.child{
    margin:auto;
}

4、单独讲讲flex布局

　　其实flex布局已经不是什么新鲜的事物了，早在2009年，W3C就提出了一种新方案，可是因为各类浏览器兼容性的问题，这种方案一直没有推广开来。记得很在早前就有使用过一个叫swiper的移动端插件，看了其中的源代码，发现它里面就使用了flex布局，草草看了一下，也知道大概意思，可是以后的项目一直没有机会使用，我也就没有再关注过。前端时间去看看这种方案的兼容性，95%以上已经完美支持这种解决方案了。so。。。能够大胆的使用了。（有点坑的就是，IE10如下不支持，ios没问题，手机安卓4.3如下也不支持）

flex布局也叫弹性布局，相比传统的布局以及bootstrap的栅格布局，flex布局显得更加的灵活，代码写起来也更加的优雅。

　任何一个容器均可以经过设置 display 为 flex/inline-flex 将其指定为Flex布局。对于设置了Flex布局的容器，子元素的 float、clear、vertical-align 属性将失效；可是，若是对这些子元素设置 position 定位，那么Flex属性的做用会失效。即按权重来讲：position > flex > flot/clear/vertival-align;

直接插入主题，怎么使用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

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

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

拿来看个例子吧，若是ui给你这样的的设计稿，你怎么出来？

这样怎么排版？用什么办法？定位？？？其实咱们能够尝试用flex的解决方案。看看效果，这么没有百分之百去还原，作了大概。

实现思路，给父元素加上下面的属性（已经最大程度考虑了浏览器的兼容性），而后给元素加上margin值就能达到上面的效果了。

.flex{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
/*居中对齐*/
	.flex-justify-center{
	-webkit-box-pack:center;
	-moz-justify-content:center;
	-webkit-justify-content:center;
	justify-content: center;
}

/*上下居中*/
.flex-align{
	-webkit-box-align:center;
	-moz-align-items:center;
	-webkit-align-items:center;
	align-items:center;
}

5、经典布局--两列布局　

需求：左边宽度固定，右边宽度自适应

一、flex

<style>
body{
    display: flex;
}
.left{
    background-color: rebeccapurple;
    height: 200px;
    width：100px;
}
.right{
    background-color: red;
    height: 200px;
    flex:1;     
}
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

二、float+margin　

<style>
    div {
        height: 200px;
    }
    .left {
        float: left;
        width: 100px;
        background-color: rebeccapurple;
    }
    .right {
        margin-left: 100px;
　　　　 //直接用overflow：hidden触发BFC模式　　
        background-color: red;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

三、table

<style>
    .parent{
        width: 100%;
        display: table;
        height: 500px;
     }
     .left,.right{
        display:table-cell;
     }
    .left {
        width: 100px;
        background-color: rebeccapurple;
    }
    .right {
        background-color: red;
    }
</style>
<body>
    <div class="parent">
         <div class="left"></div>
         <div class="right"></div>
    </div> 
</body>

说明：利用单元格自动分配宽度　　

四、利用绝对定位

.parent{
    position: relative;  /*子绝父相*/
}
.left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 500px;
}
.right {
    position: absolute;
    top: 0;
    left: 100px; 
    right: 0;
    height: 500px;
}

五、float+overflow

.left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
.right {
    background-color: #0f0;
    height: 500px;
    overflow: hidden;
}

<div id="left">左列定宽</div>
<div id="right">右列自适应</div>

六、Grid栅格布局

.parent {
    width: 100%;
    height: 500px;
    display: grid; //声明
    grid-template-columns: 100px auto; 
}
.left {
    background-color: red;
}
.right {
    background-color: green;
}

说明：支持还不太好

MDN: CSS Grid Layout

6、总结

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

建议若是需求不太考虑低版本的兼容问题，能够大胆的使用flex和grid等方法，真的好用~。