首页 > 代码库 > css3 flex盒子布局

css3 flex盒子布局

2024-08-28 00:18:08   217人阅读

<!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盒子布局


联系
我们