css属性align-content与align-items的区别

最新推荐文章于 2024-05-18 06:08:21 发布

javaboyad2

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量593

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/javaboyad2/article/details/122379238

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

页面结构:

<body>
    <div id="condiv">
        <div class="row1 subdiv"></div>
        <div class="row2 subdiv"></div>
        <div class="row3 subdiv"></div>
        <div class="row4 subdiv"></div>
        <div class="row5 subdiv"></div>
        <div class="row6 subdiv"></div>
    </div>
</body>

当css设置如下时:

#condiv {
            width: 300px;
            height: 500px;
            border: 2px solid lightblue;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;

        }

        .row1 {
            height: 50px;
            background-color: lightblue;
        }

        .row2 {
            height: 100px;
            background-color: lightseagreen;
        }

        .row3 {
            height: 130px;
            background-color: limegreen;
        }

        .row4 {
            height: 80px;
            background-color: mediumorchid;
        }

        .row5 {
            height: 60px;
            background-color: midnightblue;
        }

        .row6 {
            height: 50px;
            background-color: orange;
        }

        .subdiv {
            width: 25%;
        }

效果如图:

再给父容器加上align-items: center这个css属性就能看出区别来了,如图所示:

align-items是交叉轴一行的对齐方式,而align-content是所有子元素在父容器内作为整体的对齐方式

javaboyad2

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css属性align-content与align-items的区别

页面结构:<body> <div id="condiv"> <div class="row1 subdiv"></div> <div class="row2 subdiv"></div> <div class="row3 subdiv"></div> <div class="row4 subdiv"></div>
复制链接

扫一扫