align-items和align-content的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

article{
            width: 300px;
            height: 300px;
            margin: 0 auto;
            display: grid;
            grid-template-columns:repeat(4,60px);
            border: solid chocolate 3px;
            justify-content: space-evenly;
            _align-items: center;/*单行/多行*/
            align-content: center;/*单行*/
        }

        div{
            height: 50px;
            background: blueviolet;
            background-clip: content-box;
            padding: 10px;
            border: solid chartreuse 3px;
            
        }

    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </article>
</body>
</html>

align-items

align-items属性适用于所有的flex容器,它是用来设置每个flex元素在侧轴上的默认对齐方式。

align-items和align-content有相同的功能,不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。

align-content

align-content属性只适用于多行的flex容器,并且当侧轴上有多余空间使flex容器内的flex线对齐。

 

点赞

发表评论