简介
- 用来设置整个区域的摆放位置
justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;
用于配置水平方向上的排列align-content: start | end | center | stretch | space-around | space-between | space-evenly ;
用于配置垂直方向上的排列
- 一般使用的时候容器的宽度或者高度,要大于被分割的宽高的总和
例子
我们首先写上如下
<!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; /*垂直方向的剩余空间平均分配*/
}