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

最新推荐文章于 2024-01-18 20:08:16 发布

原创最新推荐文章于 2024-01-18 20:08:16 发布 · 888 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

css 专栏收录该内容

8 篇文章

订阅专栏

本文通过示例介绍了CSS中flexbox布局的align-items和align-content属性，展示了它们如何影响子元素在交叉轴上的对齐方式。align-items控制单行元素的对齐，而align-content则调整所有子元素作为一个整体在多行情况下的对齐。通过改变这两个属性的值，可以灵活地调整网页元素的排列效果。

页面结构:

<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%;
        }

效果如图: