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


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

    一、水平居中

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

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

    .parent{
        text-align: center;
    }

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

    2、单个块级元素

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

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

    3、多个块级元素

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

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

    4、定位+transform/定位+margin

    #parent{
        height: 200px;
         200px;  
        position: relative; 
    }
    #son{
        position: absolute; 
        left: 50%; 
        transform: translateX(-50%); 
    /*margin-left: -50px;*/ 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;
             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{
             100%;
            display: table;
            height: 500px;
         }
         .left,.right{
            display:table-cell;
         }
        .left {
             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;
         100px;
        height: 500px;
    }
    .right {
        position: absolute;
        top: 0;
        left: 100px; 
        right: 0;
        height: 500px;
    }
    

    5、float+overflow

    .left {
        background-color: #f00;
        float: left;
         100px;
        height: 500px;
    }
    .right {
        background-color: #0f0;
        height: 500px;
        overflow: hidden;
    }
    
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
    

    6、Grid栅格布局

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

    说明:支持还不太好

    MDN: CSS Grid Layout

    六、总结

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

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

  • 相关阅读:
    Ubuntu18.04 一些好用的扩展
    Java并发编程:volatile关键字解析
    SpringCloud(0) 外行人都能看懂的SpringCloud,错过了血亏!
    Java8中的流操作-基本使用&性能测试
    JDBC基本操作
    单例模式(二)
    单例模式(一)static、final和单例模式
    Lombok的使用与原理
    Linux下出现permission denied的解决办法
    虚拟机安装
  • 原文地址:https://www.cnblogs.com/leaf930814/p/6340756.html
Copyright © 2020-2023  润新知