提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

grid布局之容器属性justify-content与align-content

属性容器 布局 content Grid Align
2023-09-11 14:19:18 时间

简介

  1. 用来设置整个区域的摆放位置
    1. justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;用于配置水平方向上的排列
    2. align-content: start | end | center | stretch | space-around | space-between | space-evenly ;用于配置垂直方向上的排列
  2. 一般使用的时候容器的宽度或者高度，要大于被分割的宽高的总和

例子

我们首先写上如下

<!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>Document</title>
</head>

<body>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul {
            border: 3px solid rebeccapurple;
            width: 600px;
            height: 600px;
            font-weight: bold;
            color: white;
            text-align: center;
            line-height: 100px;
            font-size: 40px
        }

        li:nth-child(even) {
            background-color: red;
        }

        li:nth-child(odd) {
            background-color: #000000;
        }

        ul{
            display: grid;
            grid-template-rows: repeat(3,100px);
            grid-template-columns: repeat(3,100px);
            gap: 10px 10px;
        }

    </style>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</body>

</html>

效果
在这里插入图片描述

start

从行首开始排列

ul{
    display: grid;
    grid-template-rows: repeat(3,100px);
    grid-template-columns: repeat(3,100px);
    gap: 10px 10px;
    justify-content: start;
    align-content: start;
}

这个属于默认效果，整体从左上角开始排列

end

从末尾开始排列

ul{
    display: grid;
    grid-template-rows: repeat(3,100px);
    grid-template-columns: repeat(3,100px);
    gap: 10px 10px;
    justify-content: end;
}

在这里插入图片描述

ul{
    display: grid;
    grid-template-rows: repeat(3,100px);
    grid-template-columns: repeat(3,100px);
    gap: 10px 10px;
    align-content: end;
}

在这里插入图片描述

center

居中排列

ul{
    display: grid;
    grid-template-rows: repeat(3,100px);
    grid-template-columns: repeat(3,100px);
    gap: 10px 10px;
    justify-content: center;
}

在这里插入图片描述

ul{
    display: grid;
    grid-template-rows: repeat(3,100px);
    grid-template-columns: repeat(3,100px);
    gap: 10px 10px;
    align-content: center;
}

在这里插入图片描述

stretch

使用当前属性的时候，我们不要设置项目的大小，他会拉伸项目知道沾满空间

ul{
    display: grid;
    gap: 10px 10px;
    justify-content: stretch;
}

在这里插入图片描述

space-around

  • 剩余空间平均分配
ul{
    display: grid;
    grid-template-rows: repeat(3,100px);
    grid-template-columns: repeat(3,100px);
    justify-content: space-around; /*水平方向的剩余空间平均分配*/
    align-content: space-around; /*垂直方向的剩余空间平均分配*/
}

在这里插入图片描述

space-between

  • 剩余空间在列或者行间平均分配剩余空间
ul{
    display: grid;
    grid-template-rows: repeat(3,100px);
    grid-template-columns: repeat(3,100px);
    justify-content: space-between; /*水平方向的剩余空间平均分配*/
    align-content: space-between; /*垂直方向的剩余空间平均分配*/
}

在这里插入图片描述

space-evenly

  • 剩余空间的平均分配，他与space-around的区别是每一列或者每一行两侧的分配的空间是相同的
ul{
    display: grid;
    grid-template-rows: repeat(3,100px);
    grid-template-columns: repeat(3,100px);
    justify-content: space-evenly; /*水平方向的剩余空间平均分配*/
    align-content: space-evenly; /*垂直方向的剩余空间平均分配*/
}

在这里插入图片描述

相关文章