flex布局align-items和align-content的区别

百度首页

flex布局align-items和align-content的区别

1、align-items是针对每一个子项起作用，它的基本单位是每一个子项，在所有情况下都有效果

2、align-content属性是将flex子项作为一个整体起作用，它的基本单位是子项构成的行

只在两种情况下有效果：

①子项多行且flex容器高度固定

②子项单行，flex容器高度固定且设置了flex-wrap:wrap

主轴为 flex-deriction定义的方向，默认为row

交叉轴跟主轴垂直即为column，反之它们互调

justfiy-content：应用于flex容器，设置flex子项（flex items）在主轴上的对齐方式。

不同取值的效果如下所示：

align-items：应用于flex容器，设置flex子项在每个flex行的交叉轴上的默认对齐方式。

不同取值的效果如下所示：

align-content：只适用多行的flex容器（子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体（属性值为：flex-start、flex-end、center时）进行对齐。不同取值的效果如下所示：

第2部分：实例演示

例1效果图：

Html+css代码：

.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid #9a9a9a; display: flex; }

.flex div { width: 100px; margin: 5px; }

.flex div.eg1 { background-color: #ffb685; height: 130px; }

.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

</style>

</div>

结论1：

在flex布局中，有默认属性：align-items: normal;和 align-content: normal;

效果为顶部对齐。

例2效果图：

设置 align-items : center

Html+css代码：

.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display: flex;align-items: center; }

.flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-align:center; }

.flex div.eg1 { background-color: #ffb685; height: 130px; }

.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

</style>

</div>

结论2：

容器的高度为最高子项的高度，同一行的所有子项全都在交叉轴上居中对齐，即子项的高度中线与flex交叉轴中线重合。

例3效果图：

设置 align-content: center

Html+css代码：

.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display: flex;align-content: center; }

.flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-align:center; }

.flex div.eg1 { background-color: #ffb685; height: 130px; }

.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

</style>

</div>

结论3：

flex容器不设置高度并且子项只有一行时，align-content属性是不起作用的。

与初始状态并没有区别

例4效果图：

flex容器设置高度

Html+css代码：

.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display: flex;height: 300px; }

.flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-align:center; }

.flex div.eg1 { background-color: #ffb685; height: 130px; }

.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

</style>

</div>

结论4：

外层容器的高度增加，但是子项和flex容器不设置高度一样。

例5效果图：

设置 align-items : center

Html+css代码：

.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display: flex;height: 300px; align-items : center}

.flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-align:center; }

.flex div.eg1 { background-color: #ffb685; height: 130px; }

.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

</style>

</div>

结论5：

同一行的子项全部在交叉轴上居中对齐，与flex容器高度不设置时的效果一样（只不过此时高度最大的子项也居中对齐了）。

例6效果图：

设置 align-content: center

Html+css代码：

.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display: flex;height: 300px; align-content: center}

.flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-align:center; }

.flex div.eg1 { background-color: #ffb685; height: 130px; }

.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

</style>

</div>

结论6：

align-content: center;并没有起作用，效果与初始状态一样。

例7效果图：

子项为多行的情况

Html+css代码：

.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display: flex;flex-wrap: wrap; }

.flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-align:center; }

.flex div.eg1 { background-color: #ffb685; height: 130px; }

.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

.flex div.eg5 { background-color: #c8b1ff; height: 40px; }

.flex div.eg6 { background-color: #ffb1e5; height: 80px; }

</style>

</div>

结论7：

多行或单行，浏览器默认：align-items: normal; 和 align-content: normal;效果为顶部对齐。

每一行的高度为该行子项中高度最大的那个值。

例8效果图：

设置 align-items : center

Html+css代码：

.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display: flex;flex-wrap: wrap;align-items: center; }

.flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-align:center; }

.flex div.eg1 { background-color: #ffb685; height: 130px; }

.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

.flex div.eg5 { background-color: #c8b1ff; height: 40px; }

.flex div.eg6 { background-color: #ffb1e5; height: 80px; }

</style>

</div>

结论8：

各行子项都在各自行上居中对齐（各行的高度由最高的子项决定，flex容器的高度为所有行的高度最高的子项高度之和）。

例9效果图：

设置 align-content: center

Html+css代码：

.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display: flex;flex-wrap: wrap;align-content: center; }

.flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-align:center; }

.flex div.eg1 { background-color: #ffb685; height: 130px; }

.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

.flex div.eg5 { background-color: #c8b1ff; height: 40px; }

.flex div.eg6 { background-color: #ffb1e5; height: 80px; }

</style>

</div>

结论9：

与初始状态一样，align-content: center并没有起作用，因为此时是以所有子项作为一个整体，而flex容器并没有指定高度（flex容器的高度即为子项整体的最大高度），所以flex容器在交叉轴上没有多余的空间，那么子项整体自然而然也就没有在交叉轴上对齐的说法了。

例10效果图：

flex容器设置高度

Html+css代码：

.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display: flex;flex-wrap: wrap;height: 300px; }

.flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-align:center; }

.flex div.eg1 { background-color: #ffb685; height: 130px; }

.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

.flex div.eg5 { background-color: #c8b1ff; height: 40px; }

.flex div.eg6 { background-color: #ffb1e5; height: 80px; }

</style>

</div>

结论10：

由浏览器的默认值确定。

例11效果图：

设置 align-items : center

Html+css代码：

.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display: flex;flex-wrap: wrap;height: 400px; align-items : center}

.flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-align:center; }

.flex div.eg1 { background-color: #ffb685; height: 130px; }

.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

.flex div.eg5 { background-color: #c8b1ff; height: 40px; }

.flex div.eg6 { background-color: #ffb1e5; height: 80px; }

</style>

</div>

结论11：

flex容器将交叉轴上的多余空间按行数平均分给每行，然后每行各自按自己所在的行居中对齐

例12效果图：

设置 align-content: center

Html+css代码：

.<style type="text/css">

.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display: flex;flex-wrap: wrap;height: 300px; align-content: center}

.flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-align:center; }

.flex div.eg1 { background-color: #ffb685; height: 130px; }

.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

.flex div.eg5 { background-color: #c8b1ff; height: 40px; }

.flex div.eg6 { background-color: #ffb1e5; height: 80px; }

</style>

</div>

结论12：

flex容器指定高度且子项为多行时，align-content: center将子项作为一个整体，然后这个整体在flex容器的交叉轴上居中对齐的。

例13效果图：

当子项为单行，flex容器有固定的高度且设置了flex-wrap: wrap;时，align-content: center;

对单行的子项也有作用。

Html+css代码：

.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display: flex;flex-wrap: wrap;height: 300px; align-content: center}

.flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-align:center; }

.flex div.eg1 { background-color: #ffb685; height: 130px; }

.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

</style>

</div>

结论13：

当子项为单行且flex容器有固定的高度且设置了flex-wrap: wrap;align-content: center;

对单行的子项也有作用。将单行的子项作为一个整体在交叉轴居中了。

举报/反馈

中小学金牌教师

9201获赞 3003粉丝

专注教育十年如一日，为学生们提供教育帮助

关注