Flex布局学习&Fex对角线布局

Qing

2023-4-1

废话不多说,直接上代码

代码

点击展开查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局练习</title>
</head>
<style>
    .main{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
    }
    .exercise-1{
        width: 500px;
        height: 500px;
        background-color: blue;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .exercise-2{
        width: 500px;
        height: 500px;
        background-color: blue;
        display: flex;
        align-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .exercise-3{
        width: 500px;
        height: 500px;
        background-color: blue;
        display: flex;
        justify-content: space-between;
    }
    .exercise-4{
        width: 500px;
        height: 500px;
        background-color: blue;
        display: flex;
        justify-content: space-between;
    }
    .exercise-5{
        width: 500px;
        height: 500px;
        background-color: blue;
        display: flex;
        justify-content: space-between;
    }
    .exercise-6{
        width: 500px;
        height: 500px;
        background-color: blue;
        display: flex;
        justify-content: space-between;
    }
    .exercise-7{
        width: 500px;
        height: 500px;
        background-color: blue;
        display: flex;
        justify-content: space-between;
    }
</style>
<body>
    <div class="main">
        <div class="exercise-1">
            <div style="width: 150px;height: 150px;background-color: aqua;">

            </div>
        </div>
        <hr style="width: 100%;">
        <div class="exercise-2">
            <div style="width: 150px;height: 150px;background-color: aqua;">

            </div>
            <div style="width: 150px;height: 150px;background-color: aqua;">

            </div>
            <div style="width: 150px;height: 150px;background-color: aqua;">

            </div>
            <div style="width: 150px;height: 150px;background-color: aqua;">

            </div>
            <div style="width: 150px;height: 150px;background-color: aqua;">

            </div>
            <div style="width: 150px;height: 150px;background-color: aqua;">

            </div>
        </div>
        <hr style="width: 100%;">
        <div class="exercise-3">
            <div style="width: 150px;height: 150px;background-color: aqua;">

            </div>
            <div style="width: 150px;height: 150px;background-color: aqua;align-self: flex-end;">

            </div>
        </div>
        <hr style="width: 100%;">
        <div class="exercise-4">
            <div style="width: 150px;height: 150px;background-color: aqua;">

            </div>
            <div style="width: 150px;height: 150px;background-color: aqua;align-self: center;">

            </div>
            <div style="width: 150px;height: 150px;background-color: aqua;align-self: flex-end;">

            </div>
        </div>
        <hr style="width: 100%;">
        <div class="exercise-5">
            <div style="display: flex;align-content: space-between;width: 150px;height: 500px;flex-wrap: wrap;">
                <div style="width: 150px;height: 150px;background-color: aqua;">

                </div>
                <div style="width: 150px;height: 150px;background-color: aqua;">

                </div>
            </div>
            <div style="display: flex;align-content: space-between;width: 150px;height: 500px;flex-wrap: wrap;">
                <div style="width: 150px;height: 150px;background-color: aqua;">

                </div>
                <div style="width: 150px;height: 150px;background-color: aqua;">

                </div>
            </div>
            
        </div>
        <hr style="width: 100%;">

        <div class="exercise-6">
            <div style="display: flex;align-content: space-between;width: 150px;height: 500px;flex-wrap: wrap;">
                <div style="width: 150px;height: 150px;background-color: aqua;">

                </div>
                <div style="width: 150px;height: 150px;background-color: aqua;">

                </div>
            </div>
            <div style="display: flex;align-content: center;width: 150px;height: 500px;flex-wrap: wrap;">
                <div style="width: 150px;height: 150px;background-color: aqua;">

                </div>
            </div>
            <div style="display: flex;align-content: space-between;width: 150px;height: 500px;flex-wrap: wrap;">
                <div style="width: 150px;height: 150px;background-color: aqua;">

                </div>
                <div style="width: 150px;height: 150px;background-color: aqua;">

                </div>
            </div>
            
        </div>
        <hr style="width: 100%;">

        <div class="exercise-7">
            <div style="display: flex;align-content: space-between;width: 150px;height: 500px;flex-wrap: wrap;">
                <div style="width: 150px;height: 150px;background-color: aqua;">

                </div>
                <div style="width: 150px;height: 150px;background-color: aqua;">

                </div>
                <div style="width: 150px;height: 150px;background-color: aqua;">

                </div>
            </div>
            
            <div style="display: flex;align-content: space-between;width: 150px;height: 500px;flex-wrap: wrap;">
                <div style="width: 150px;height: 150px;background-color: aqua;">

                </div>
                <div style="width: 150px;height: 150px;background-color: aqua;">

                </div>
                <div style="width: 150px;height: 150px;background-color: aqua;">

                </div>
            </div>
            
        </div>
    </div>
</body>
</html>

效果图

点击展开查看效果图

说明:

效果图的顺序和代码中的顺序一样
exercise-1 代表一个盒子,也就是第一张图,其他以此类推

版权声明 1 本网站名称：QingYu
2 本站永久网址：https://landaiqing.space
3 当前文章标题：Flex布局学习&Fex对角线布局
4 当前文章网址：https://landaiqing.space/474.html
5 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ进行删除处理。
6 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
7 如您发现本站提供资源链接失效，请联系我们处理。

THE END