CSS——弹性盒模型

这东西很方便呀，要分清容量属性和条目属性，想用条目属性之前要在父元素中添加：display：flex。

做了一个简易的菜单栏应用了一下这个模型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒模型</title>
    <style type="text/css">

        body,ul{
            margin:0;
            padding:0;
        }

        ul{
            list-style:none;
        }


        .menu_con{
            width:960px;
            height:80px;
            background-color:#ddd;
            margin:50px auto 0;
            display: flex;
        }

        .logo{
            width:80px;
            height:80px;
            background-color: gold;


        }

        .menu{

            flex-grow: 1;

            display:flex;
            align-items:center;
            overflow:hidden;
        }

        .menu li{
            flex-grow:1;
            border-right:1px solid #333;
            margin-right:-1px;
            text-align: center;
        }

        .menu li a{
            text-decoration: none;
            color:#666;
        }


        @media(max-width:960px){
            .menu_con{
                width:100%;
            }
        }
    </style>
</head>
<body>
    <div class="menu_con">
        <div class="logo"></div>
        <ul class="menu">
            <li><a href="#">首页</a></li>
            <li><a href="">首页</a></li>
            <li><a href="">首页</a></li>
            <li><a href="">首页</a></li>
            <li><a href="">首页</a></li>
        </ul>
    </div>
</body>
</html>

CSS——弹性盒模型

猜你喜欢