css-5（弹性盒子）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
    /*  分别设置father和son的宽高和边框*/
     
        .father{
            width: 1000px;
            height: 500px;
            border: 1px solid black;
            /*在css中设置father为弹性盒子*/
            display: flex;
            /*让father的子元素在father中水平居中
             justify-content: center;*/
            /*让子元素空间环绕*/
            justify-content: space-around;
            /*让子元素垂直居中*/
            align-items: center;
            /*允许当父系元素宽度小于子元素总宽度时,多余的子系元素换行排列*/
            flex-wrap: nowrap;
        }
        .son{
            /*可去掉son的宽度,使用flex:N(n填写数字)参数,则每个son的宽度占父系宽度的 "N/总N"
             * flex: N;*/
            width: 200px;
            height: 100px;
            border: 1px solid blue;
        }
    </style>
    <body>
        <!--设置一个父系div，取名叫father-->
        <div class="father">
            <!--设置子div，取名叫son-->
            <div class="son"></div>     
             <div class="son"></div>    
             <div class="son"></div>    
                 
                 
        </div>
    </body>
</html>