css3 flex盒子布局

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            .nav{

                display: -webkit-flex;

                background-color: lightgreen;

                height: 100px;

            }

            .item{

                color: #FFF;

                flex: 1;

            }

            .first{

                width: 100px;

                background: red;

            }

            /*水平垂直居中   css*/

            .myoff{

                position: absolute;

                top: 50%;

                left: 50%;

                transform: translate(-50% , -50%);

                background-color: royalblue;

                width: 300px;

                height: 300px;

            }

            /*水平垂直居中 flex版本*/

            .parent{

                display: flex;

                justify-content: center;

                align-items: center;

                position: absolute;

                left: 0;

                top: 0;

                width: 100%;

                height: 100%;

            }

        </style>

    </head>

    <body>

        <div class="nav" style="flex-direction: row-reverse;">

            <div class="first">哈哈</div>

            <div class="item">adsfasdf</div>

            <div class="item" style="flex: 2;">大厦法定是adsfasdf</div>

            <div class="first">呵呵</div>

        </div>

        <!--<div class="myoff">asdf</div>-->

        <div class="parent">

            <div style="width: 100px;height: 100px; background: red;">aaaaaaaaaaaa</div>

        </div>

    </body>

</html>
巴特西

css3 flex盒子布局

最新文章

热门文章
