flex布局

阅读量: 135 编辑

flex布局

一、flex布局案例

display:flex;
flex-direction: row;        //排序的方向,row代表横向排列,column代表纵向排列
justify-content: center;   //排列方向的居中
align-items: center;        //表示和排列方向对应的垂直方向的居中
flex-wrap: wrap;            //换行

二、代码实战

代码的详细解读,可以参考视频教程

文件:05.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex布局</title>

        <style type="text/css">
            .container{
                height: 500px;
                background-color: yellow;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }
            .mydiv{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>

    </head>
    <body>

        <div class="container">
            <div class="mydiv">
                div1
            </div>
            <div class="mydiv">
                div2
            </div>
        </div>

        <div class="mydiv" style="float: right"></div>

    </body>
</html>