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>
        <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是所有子元素在父容器内作为整体的对齐方式

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