彈性盒布局水平垂直居中(新彈性盒)

本文轉載自查看原文 2017-09-20 18:02 3025 前端

舊彈性盒水平垂直居中參考:http://www.cnblogs.com/ooo0/p/6617028.html

新舊彈性盒樣式參考:http://www.cnblogs.com/ooo0/p/7562906.html

display: flex; 彈性父元素屬性
align-items 設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿着彈性容器的主軸線（main axis）對齊。

代碼:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <link href="../../flex.css" rel="stylesheet" />
        <style type="text/css">
            .outer {
                height: 200px;
                border: 1px #F2DEDE solid;
            }
            
            .flex {
                display: flex; /*新彈性盒布局*/
            }
            
            .ai-c {
                align-items: center;/*水平居中*/
            }
            
            .jc-c {
                justify-content: center; /*垂直居中*/
            }
            
        </style>
    </head>

    <body>

        <div class="outer flex ai-c jc-c">
            <div class="inner" style="background: #DFF0D8;width:40px;height:50px;">left</div>
            <div class="inner" style="background: #D9EDF7;width:60px;height:80px;">middle</div>
            <div class="inner" style="background: #FCF8E3;width:40px;height:50px;">right</div>
        </div>

    </body>

</html>

效果:

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 彈性盒子布局水平垂直居中移動端利用-webkit-box水平垂直居中(舊彈性盒) 彈性布局的三種垂直居中彈性盒模型（伸縮布局） CSS3彈性盒布局彈性盒模型布局入門 css3彈性盒布局彈性盒布局(Flex Box) 盒模型水平垂直居中方法 CSS3 彈性盒模型與流式布局

彈性盒布局 水平垂直居中(新彈性盒)

免責聲明！

彈性盒布局水平垂直居中(新彈性盒)