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

一、水平居中

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

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

.parent{

    text-align: center;

}

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

2、单个块级元素

#child{

    width: 200px; /*必须定宽*/

    margin: 0 auto;

}　

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

3、多个块级元素

.parent{

    text-align: center;

}

.child{

    display: inline-block;

}

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

4、定位+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兼容性不好，需要加上各种浏览器内核前缀；

5、flex布局

.parent{

    display: flex;

    justify-content: center;

}

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

二、垂直居中

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

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

.parent{

    height: 100px;

    line-height: 100px;

}

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

2、多行文本

.parent{

    height: 100px;

    line-height: 50px;

}

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

.parent{

    display: table-cell;

    vertical-align: middle;

}

4、定位+transform/定位+margin

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

5、flex布局

parent{

    display: flex;

    align-items: center;

}

或

.parent{

    display: flex;

}

.child{

    align-self: center;

}

说明：还是兼容性的缺点　

三、水平垂直居中

<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、text-align+height +line-height

.parent{
  text-align:center;

  height: 100px;

}

.child{

  line-height: 100px;

}

4、table-cell

.parent{

    display: table-cell;

    vertical-align: middle;

}

.child{

    margin:auto;

}

四、单独讲讲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;

}

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

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

1、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>

2、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>

3、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>

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

4、利用绝对定位

.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;

}

5、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>

6、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

六、总结

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

建议如果需求不太考虑低版本的兼容问题，可以大胆的使用flex和grid等方法，真的好用~。

页面常见布局以及实现方法--flex的更多相关文章

  1. CSS3与页面布局学习总结（四）——页面布局的多种方法

    一.负边距与浮动布局   1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的 ...

  2. 结合CSS3的布局新特征谈谈常见布局方法

    写在前面最近看到<图解CSS3>的布局部分,结合自己以前阅读过的一些布局方面的知识,这里进行一次基于CSS2.3的各种布局的方法总结. 常见的页面布局 在拿到设计稿时,作为一个前端人员,我 ...

  3. 几种常见布局的flex写法

    flex布局目前基本上兼容主流的浏览器,且实现方式简单.我整理了flex的一些知识点,并且总结归纳了几种常见布局的flex写法 ​flex基础知识点 flex-grow和flex-shrink相关计算 ...

  4. flex大法：一网打尽所有常见布局

    flex全称Flexible Box模型,顾名思义就是灵活的盒子,不过一般都叫弹性盒子,所有PC端及手机端现代浏览器都支持,所以不用担心它的兼容性,有了这玩意,妈妈再也不用担心我们的布局. 先简单介绍 ...

  5. CSS常见布局解决方案

    最近要准备移动端项目,大半年没好好写过CSS了,今天恶补了一下CSS的一些布局,下面做一些分享. 水平居中布局 1.margin + 定宽 <div class="parent&quo ...

  6. css CSS常见布局解决方案

    CSS常见布局解决方案说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案.水平居中布局首先我们来看看水平居 ...

  7. 前端进阶系列(二):css常见布局解决方案

    水平居中布局 margin+定宽 <div class="parent"> <div class="child">Demo</di ...

  8. htm的常见布局

    布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现),希望能给需要的小 ...

  9. css常见布局问题

    1.如何实现一个盒子在页面中上下左右居中 方法一:(盒子宽高固定时) .box{ width:400px; height:200px; background:#000; position:absolu ...

随机推荐

  1. Cocos2d－三维拾取Ray-AABB碰撞检测算法【转】

    1.三维拾取技术 在3D游戏中通常会有这样的需求,用户可以选取3D世界中的某些物体进行如拖拽等操作,这时便需要程序通过将二维屏幕上的点坐标转换为三维世界中的坐标,并进行比对,这个过程就需要用到三维拾取 ...

  2. Net系列框架-Dapper+简单三层架构

    Net系列框架-Dapper+简单三层架构 工作将近6年多了,工作中也陆陆续续学习和搭建了不少的框架,后续将按由浅入深的方式,整理出一些框架源码,所有框架源码本人都亲自调试通过,如果有问题,欢迎联系我 ...

  3. SQL Server2008 R2 数据库镜像实施手册(双机)

    一.配置主备机 1. 服务器基本信息 主机名称为:HOST_A,IP地址为:192.168.1.155 备机名称为:HOST_B,IP地址为:192.168.1.156 二.主备实例互通 实现互通可以 ...

  4. 使用filter进行登录验证，并解决多次重定向问题

    最近在做关于filter登录验证的功能,防止未登录的用户直接通过地址进入系统 LoginFilter类:继承Filter接口 package com.ss.filter; import java.io ...

  5. log4net 未生成log 原因分析

    本文假定你对log4net的配置以及在代码中的使用都非常熟悉,但就是没有按预想的生成log文件,正当你抓耳挠腮之时,那以下原因很可能是你解决问题的办法: 1.log4net.dll是否生成到程序运行目 ...

  6. Javascript/jQuery常用方法

    //字符串转成时间 function getDate(strDate) { var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$)/ ...

  7. Interesting JavaScript

    作者:ManfredHu 链接:http://www.manfredhu.com/2016/07/07/20-interestingJavascript 声明:版权所有,转载请保留本段信息,否则请不要 ...

  8. s11 day105

  9. P3175 [HAOI2015]按位或

    传送门 一如既往膜拜shadowice巨巨 前置姿势我就没一个会的-- //minamoto #include<bits/stdc++.h> #define R register #def ...

  10. Linux core 文件 gdb

    http://blog.csdn.net/mr_chenping/article/details/13767609 在程序不寻常退出时,内核会在当前工作目录下生成一个core文件(是一个内存映像,同时 ...