概要
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
刚开始看到这句话的时候一头雾水
共有下面的属性
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
看到这个图的时候一脸无赖
下面一个一个进行分析
1.flex-start
刚开始的代码如下,这里还没有加这个algin-content:flex-start
这个属性
<!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>aligin-content的分析</title>
<style>
.cont{
margin: 10px auto;
width: 800px;
height: 800px;
border: 1px solid red;
/* 弹性布局 */
display: flex;
}
.cont div{
width: 100px;
height: 100px;
margin-left: 10px;
background-color: aqua;
/* 让字体京可能的居中 */
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="cont">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
</div>
</body>
</html>
为了具有代表性,决定改变一些子项目的高度和宽度
代码如下
<!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>aligin-content的分析</title>
<style>
.cont{
margin: 10px auto;
width: 800px;
height: 800px;
border: 1px solid red;
/* 弹性布局 */
display: flex;
}
.cont div{
width: 100px;
height: 100px;
margin-left: 10px;
background-color: aqua;
font-size: 23px;
/* 让字体京可能的居中 */
text-align: center;
line-height: 100px;
}
.cont .bigHeight{
height: 120px;
}
.cont div:nth-child(2){
height: 150px;
background-color:red;
}
.cont .bigWeight{
width: 120px;
}
</style>
</head>
<body>
<div class="cont">
<div class="bigWeight">1</div>
<div>2</div>
<div class="bigHeight">3</div>
<div>4</div>
<div class="bigHeight">5</div>
<div>6</div>
<div class="bigWeight">7</div>
<div>8</div>
<div class="bigHeight">9</div>
<div>10</div>
<div class="bigWeight">11</div>
<div>12</div>
<div class="bigHeight">13</div>
<div>14</div>
<div class="bigWeight">15</div>
<div>16</div>
</div>
</body>
</html>
开始使用该属性
首先加了两个地方
加该属性之后
2.flex-end
3.center
4.stretch
这个有点疑惑
0
5.space-between