12月23日作业 flex容器的六个属性与功能 -php线上培训班十期

初步了解flex容器的属性与功能

flex容器的六个属性与功能：
![](https://img.php.cn/upload/image/857/364/136/1577641071258844.jpg)

flex容器属性案例：
代码段：

<!DOCTYPE html>
<html>
    <head>
        <mate charset="UTF-8">
        <title>
            flex术语
        </title>
        <style>
            .container {
                height : 300px;
                width : 50%;
                border : 1px dashed;
                box-sizing : border-box;
                background-color : red;
            }
            .item {
                width : 200px;
                height : 50px;
                border : 1px dashed;
                box-sizing : border-box;
                background-color : wheat;
            }
            .container {
                display : flex;
            }
            .container {
                flex-direction : row;
                flex-wrap : wrap;
                justify-content : flex-end;
                justify-content: space-around;
                align-items: flex-start;
                align-content: space-around;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <span class="item">1</span>
            <span class="item">2</span>
            <span class="item">3</span>
            <span class="item">4</span>
            <span class="item">5</span>
            <span class="item">6</span>
            <span class="item">7</span>
            <span class="item">8</span>
        </div>
    </body>
</html>

效果图：

12月20日作业分析：
单个知识点都已经掌握了，但是不能灵活运用，独立完成一个页面时不知如何下手，还需要多加练习才能彻底掌握基本的页面开发套路

相关文章