慕课网3-10编程练习：简单的flex布局

小伙伴们，我们学习了伸缩容器的一些属性，接下来使用我们所学的伸缩容器属性完成下面的效果图。

完成效果：

任务

1、先将容器设置为伸缩容器

2、在垂直方向上对齐，行与行之间的空白距离一样

3、在水平方向上对齐，第一个和最后一个项目位于容器的最左边和最右边

<!DOCTYPE html>
<html>

<head lang="zh-CN">
    <meta charset="UTF-8">

    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
            background-color: orange;
            height: 150px;
            width: 390px;
            margin: 20px auto;
            /* 此处补充代码 */

        }
        

    </style>
</head>

<body>
    <ul>
        <li>第一个li</li>
        <li>第二个li</li>
        <li>第三个li</li>
        <li>第四个li</li>
        <li>第五个li</li>
        <li>第六个li</li>
    </ul>
</body>

</html>

参考代码：

<!DOCTYPE html>
<html>

<head lang="zh-CN">
    <meta charset="UTF-8">

    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
            background-color: orange;
            height: 150px;
            width: 390px;
            margin: 20px auto;
            /* 此处补充代码 */
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            flex-wrap: wrap;
            align-content: space-around;
        }
        
        li {
            font-size: 24px;
            width: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>第一个li</li>
        <li>第二个li</li>
        <li>第三个li</li>
        <li>第四个li</li>
        <li>第五个li</li>
        <li>第六个li</li>
    </ul>
</body>

</html>

慕课网3-10编程练习：简单的flex布局

猜你喜欢