zoukankan      html  css  js  c++  java
  • CSS3 Flexbox轻巧实现元素的水平居中和垂直居中(转)

     

    CSS3 Flexbox轻松实现元素的水平居中和垂直居中

    网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点,而Flex是刚出来不久的东西而已,为了方便说明,赶上新技术,下面我就把这种布局叫Flex布局。

    元素居中,相信作为前端工程师的你肯定会经常用到,不管是在水平方向居中,还是垂直方向居中,都可在你的职业生涯中徘徊。不过很多时候要实现垂直居中,还是比较麻烦的。不过你也不用担心,下面就给大家分享下通过Flex布局轻松实现元素在水平、垂直方向上的居中效果。

    水平居中最为简单我们直接来看下代码

     

    1.单个元素水平居中

    CSS3 Flexbox轻松实现元素的水平居中和垂直居中
    CSS3 Flexbox轻松实现元素的水平居中和垂直居中

     

    CSS代码

    .box{
        display: flex;
        justify-content: center;
        background: #0099cc
    }
    h1{
        color: #FFF
    }

     

    HTML代码

    <div class="box">
        <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
    </div>

    在这段代码里我们只需要给h1标签的父元素添加两个属性就可以了,justify-content其作用就是 让class类为box的div盒子居中。盒 子居中了,盒子里面的元素就自然居中了,他的好处就是不需要对需居中的元素(h1)设置任何样式,如果:width,margin。

     

    2.多个h1元素水平居中

    CSS3 Flexbox轻松实现元素的水平居中和垂直居中
    CSS3 Flexbox轻松实现元素的水平居中和垂直居中

     

    HTML代码

    <div class="box">
        <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
        <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
        <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
    </div>

     

    CSS代码

    .box{
        display: flex;
        justify-content: center;
         100%;
        background: #0099cc
    }
    h1{
        font-size: 1rem;
        padding: 1rem;
        border: 1px dashed #FFF;
        color: #FFF;
        font-weight: normal;
    }

    代码还是相当的整洁的,在Flex布局中,作用对象是子元素与及父元素,所以在这里我们不妨把body当作一个正常的标签使用,虽然很少这样用,但是为了说明body标签也是很接地气的,所以本例中使用了body标签作为box的父元素。

    现 在我们来分析下代码,在Flex有两个东西,一个是Flex容器(子项目父元素),另一个是子项目(Flex容器子元素)。如果不给.box添加样式, 一个h1标签占一行,也就是页面会显示三行文字“flex弹性布局justify-content属性实现元素水平居中”。如果我们给.box添加了 display: flex;那么三个h1标签就妥妥地在一行里排列了,相当于浮动,只不过他不会因为超出了.box的宽度而换行,他总是会在一行内显示。

    元素垂直居中在开端开发中有时候还是比较麻烦的,但是用了Flex布局后一切就化繁为简!我们还是来看看例子吧!

     

    1.单个h1标签垂直居中

    CSS3 Flexbox轻松实现元素的水平居中和垂直居中
    CSS3 Flexbox轻松实现元素的水平居中和垂直居中

     

    HTML代码

    <div class="box">
        <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
    </div>

     

    CSS代码

    .box{
        display: flex;
         980px;
        height: 30rem;
        align-items:center;
        background: #0099cc
    }
    h1{
        font-size: 1rem;
        padding: 1rem;
        border: 1px dashed #FFF;
        color: #FFF
    }

    为了让大家看得清楚,定义了.box的高,蓝色背景;给h1元素添加一个边框。这样,h1元素就乖乖地居中了,不用给h1设置高度,无需绝对定位,没错就这么简单粗暴。

    2.多个h1标签并排垂直居中

    CSS3 Flexbox轻松实现元素的水平居中和垂直居中
    CSS3 Flexbox轻松实现元素的水平居中和垂直居中

    HTML代码

    <div class="box">
        <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
        <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
        <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
    </div>

     

    CSS代码

    .box{
        display: flex;
         980px;
        height: 30rem;
        align-items:center;
        background: #0099cc
    }
    h1{
        font-size: 1rem;
        padding: 1rem;
        border: 1px dashed #FFF;
        color: #FFF
    }

    上面这个例子除了上HTML代码多了两个h1标签,样式都没变化。有了Flex垂直居中,元素、图片、文字居中问题瞬间化为泡影。

    注意:div,h1标签只是举例而已,Flex属性也适用于其它标签HTML标签。

    如果想父元素水平居中,你只需要给body标签一个属性就OK了。代码如下:

    body{
        display: flex;
        justify-content: center;
    }

    为了让大家看到效果,在这里我们把.box的width设置成了960px,背景颜色为#0099CC。

    3.多行h1标签垂直居中

     

    HTML代码

    <div class="box">
        <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
        <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
        <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
        <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
    </div>

     

    CSS代码

    .box{
        display: flex;
         980px;
        height: 30rem;
        justify-content:center;
        background: #0099cc;
        flex-direction:column
    }
    h1{
        display: flex;
        justify-content:center;
        font-size: 1rem;
        padding: 1rem;
        border: 1px dashed #FFF;
        color: #FFF
    }

    由于弹性容器.box添加了 display:flex; 属性,子项目默认是水平排列的,所以给.box追加一个 flex-direction:column 属性来让子项目垂直排列。此时垂直方向作为主轴,所以我们可以使用一个 justify-content:center 来让所有子项目在垂直方向上居中。为了让h1标签内的文字也水平居中,我们也给了h1一个dislay:flex;以及 justify-content:center,由于h1是默认的水平排列,所以 justify-content:center 就可以让文字在水平方向上居中。

    在这里我们只需要注意 justify-content:center 的用法就可以了,它的作用就是定义Flex项目在主轴方向上的对齐方。你也可以在这篇文章《CSS3 Flex 弹性布局用法详解》了解更多。

    最后我们来一个完整的例子,同时包含水平,垂直居中,我们还是老规矩,来看看例子

    CSS3 Flexbox轻松实现元素的水平居中和垂直居中
    CSS3 Flexbox轻松实现元素的水平居中和垂直居中

     

    HTML代码

    <div class="box">
         <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
        <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
        <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
        <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
    </div>

     

    CSS代码

    body{display: flex;justify-content:center}
    .box{
        display: flex;
         980px;
        height: 30rem;
        justify-content:center;
        background: #0099cc;
        flex-direction:column;
        align-items:center;
    }
    h1{
        display: flex;
        justify-content:center;
        font-size: 1rem;
        padding: 1rem;
        border: 1px dashed #FFF;
        color: #FFF;
         28rem
    }

    代码分析:为了让h1里的文字居中,我们给h1添加了 display:flex; 以及 justify-content:center,同样的为了让h1在.box里垂直居中,我们给.box也加上 display:flex; 以及 justify-content:center 属性。而.box里的align-items:center就 是让h1水平居中的。这个属性的作用是:定义项目在交叉轴上的对齐方式。由于我们使用了 flex-direction:column; 所以垂直方向作为主轴,交叉轴自然就是水平方向了。为让让.box也水平居中,我们同时也定义了body{display:flex;justify- content:center}

    补充例子:

    代码为:

    <style type="text/css">
        .demo{
            width: 800px;
            height: 200px;
            display: flex;
            align-items:center;
            border:1px solid green;
            margin: 0 auto;
            margin-top: 100px;
        }
        .demo .pox{
            flex: 1;
            border:1px solid orange;
            display: flex;
            align-items:center;
            justify-content: flex-start;
        }
        .demo .box{
            width: 50px;
            height: 50px;
            background: red;
        }
    </style>
    </head>
    <body>
    <div class="demo">
         <div class="pox"><h2>你好 我是居中元素</h2><span>福建省的看法接口了</span><input type="checkbox" name=""></div>
         <div class="box"></div>
    </div>
  • 相关阅读:
    ASP.NET Web API 框架研究 Self Host模式下的消息处理管道
    ASP.NET Web API 框架研究 Web Host模式下的消息处理管道
    ASP.NET Web API 框架研究 核心的消息处理管道
    ASP.NET Web API 框架研究 Web Host模式路由及将请求转出到消息处理管道
    ASP.NET Web API 框架研究 ASP.NET Web API 路由
    ASP.NET Web API 框架研究 ASP.NET 路由
    ASP.NET Web API 入门 (API接口、寄宿方式、HttpClient调用)
    MVVM模式
    RESTful Web API 理解
    C# 函数式编程及Monads.net库
  • 原文地址:https://www.cnblogs.com/xiaozhumaopao/p/7066053.html
Copyright © 2011-2022 走看看