咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

常见问题

小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

CSSflex布局属性align-items和align-content的区别是什么

这篇文章主要讲解了“CSS flex布局属性align-items和align-content的区别是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS flex布局属性align-items和align-content的区别是什么”吧！

永善ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！

在用flex布局时，发现有两个属性功能好像有点类似：align-items和align-content，乍看之下，它们都是用于定义flex容器中元素在交叉轴（主轴为flex-deriction定义的方向，默认为row，那么交叉轴跟主轴垂直即为column，反之它们互调，flex基本的概念如下图所示）上的对齐方式，那么它们之间有什么区别呢？

注：本文只限属性取值为center的情况，其他属性值请自己尝试。

CSS flex布局属性align-items和align-content的区别是什么

1. stack overflow上的回答（翻译）

  • justfiy-content属性可应用于所有的flex容器，它的作用是设置flex子项（flex items）在主轴上的对齐方式。不同取值的效果如下所示：
    CSS flex布局属性align-items和align-content的区别是什么

  • align-items属性可以应用于所有的flex容器，它的作用是设置flex子项在每个flex行的交叉轴上的默认对齐方式。不同取值的效果如下所示：
    CSS flex布局属性align-items和align-content的区别是什么

  • align-content 只适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体（属性值为：flex-start、flex-end、center时）进行对齐。不同取值的效果如下所示：
    CSS flex布局属性align-items和align-content的区别是什么
    实际上，该说法并不是很准确（见第2.3的例子），以下我们通过实例代码来验证一下。

2. 自己动手实践

2.1 子项为单行的情况

初始代码（后面例子的代码中省略了与flex无关且不变的部分，这里使用React，所以是className）如下：


     1
     2
     3
     4

对应的CSS：

.flex {
	width: 500px;
	margin: 10px;
	text-align: center;
	border: 2px solid #9a9a9a;
	display: flex; /* 默认的flex-direction为row，则交叉轴方向为column，即垂直方向*/
}
.flex div {
	width: 100px;
	margin: 5px;
}
.i1 {
	background-color: #ffb685;
	height: 130px;
}
.i2 {
	background-color: #fff7b1;
	height: 50px;
	width: 120px;
}
.i3 {
	background-color: #b1ffc8;
	height: 100px;
}
.i4 {
	background-color: #b1ccff;
	height: 60px;
}

效果如下所示：

CSS flex布局属性align-items和align-content的区别是什么
结论：在所有的flex布局中，这里其实有浏览器默认的属性：align-items: normal;和 align-content: normal;，效果为顶部对齐。

2.1.1 flex容器不设置高度

初始状态：

.flex {
	display: flex;
}

效果如下所示：
CSS flex布局属性align-items和align-content的区别是什么
结论：有默认的属性align-items: normal;，效果为顶部对齐。

.flex {
	display: flex;
	align-items: center;
}

效果如下所示：

CSS flex布局属性align-items和align-content的区别是什么
结论：可以看到容器的高度为最高子项的高度，在一行的所有子项全都在交叉轴上居中对齐，即子项的高度中线与flex交叉轴中线重合。

.flex {
	display: flex; 
	align-content: center;
}

效果如下所示：

CSS flex布局属性align-items和align-content的区别是什么
结论：可以看到与初始状态并没有区别，即在flex容器不设置高度并且子项只有一行时，align-content属性是不起作用的。

2.1.2 flex容器设置高度

初始状态：

.flex {
	height: 500px; /* 给flex容器添加一个高度 */
	display: flex;
}

效果如下所示：

CSS flex布局属性align-items和align-content的区别是什么
结论： 与flex容器不设置高度差不多，只是外层容器的高度增加而已。

.flex {
	height: 500px;
	display: flex;
	align-items: center;
}

效果如下所示：

CSS flex布局属性align-items和align-content的区别是什么
结论：可以看到在一行的所有子项全都在交叉轴上居中对齐，与flex容器高度不设置时的效果一样（只不过此时高度最大的子项也居中对齐了）。

.flex {
	display: flex;
	align-content: center;
}

效果如下所示：

CSS flex布局属性align-items和align-content的区别是什么
结论：可以看到，此时align-content: center;并没有起作用，效果与初始状态一样。

2.2 子项为多行的情况

初始状态：


     1
     2
     3
     4
     5
     6

对应的CSS：

.flex {
	width: 500px;
	margin: 10px;
	border: 2px solid #9a9a9a;
	text-align: center;
	display: flex;
	flex-wrap: wrap; /* 使flex容器一行放不下子项换行*/
}
.i5 {
	background-color: #c8b1ff;
	height: 40px;
}
.i6 {
	background-color: #ffb1e5;
	height: 80px;
}

效果如下所示：

CSS flex布局属性align-items和align-content的区别是什么
结论：同单行一样，这里也有浏览器默认的属性：align-items: normal;和 align-content: normal;，效果为顶部对齐。

2.2.1 flex容器不设置高度

初始状态：

.flex {
	display: flex;
	flex-wrap: wrap; 
}

效果如下所示：
CSS flex布局属性align-items和align-content的区别是什么
结论：默认顶部对齐，每一行的高度为该行子项中高度最大的那个值。

.flex {
	display: flex;
	flex-wrap: wrap; 
	align-items: center;
}

效果如下所示：

CSS flex布局属性align-items和align-content的区别是什么
结论：可以看到各行的子项都在各自行上居中对齐（各行的高度由高度最高的子项决定，flex容器的高度为所有行的高度最高的子项高度之和）。

.flex {
	display: flex;
	flex-wrap: wrap; 
	align-content: center;
}

效果如下所示：
CSS flex布局属性align-items和align-content的区别是什么
结论：与初始状态一样，align-content: center并没有起作用，因为此时是以所有子项作为一个整体，而flex容器并没有指定高度（flex容器的高度即为子项整体的最大高度），所以flex容器在交叉轴上没有多余的空间，那么子项整体自然而然也就没有在交叉轴上对齐的说法了。

2.2.2 flex容器设置高度

初始状态：

.flex {
	height: 500px;
	display: flex;
	flex-wrap: wrap; 
}

效果如下所示：
CSS flex布局属性align-items和align-content的区别是什么
结论：由浏览器的默认值确定。

.flex {
	height: 500px;
	display: flex;
	flex-wrap: wrap; 
	align-items: center;
}

效果如下所示：

CSS flex布局属性align-items和align-content的区别是什么
结论：这里我们可以看出，子项分为2行，flex容器将交叉轴上的多余空间按行数平均分给每行，然后每行各自按自己所在的行居中对齐（此时的单行效果跟2.1.2中的例子1效果一样）

.flex {
	height: 500px;
	display: flex;
	flex-wrap: wrap; 
	align-content: center;
}

效果如下所示：
CSS flex布局属性align-items和align-content的区别是什么
结论：我们可以看到，在flex容器指定高度并且子项为多行时，align-content: center是将子项作为一个整体，然后这个整体在flex容器的交叉轴上居中对齐的。

2.3 补充

以上为什么要区分flex容器是否有固定高度是因为有一种特殊的情况，即：当子项为单行，flex容器具有固定的高度并且设置了flex-wrap: wrap;时，align-content: center;对单行的子项也有作用。


     1
     2
     3
     4

.flex {
	height: 500px;
	display: flex;
	flex-wrap: wrap; 
	align-content: center;
}

效果如下所示：
CSS flex布局属性align-items和align-content的区别是什么
结论：可以看到此时，align-content: center;将单行的子项作为一个整体在交叉轴居中了。

感谢各位的阅读，以上就是“CSS flex布局属性align-items和align-content的区别是什么”的内容了，经过本文的学习后，相信大家对CSS flex布局属性align-items和align-content的区别是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


网站名称：CSSflex布局属性align-items和align-content的区别是什么
文章路径：http://cqcxhl.cn/article/jhcipc.html

其他资讯

分享至：
关于我们
公司简介 发展历程
服务项目
高端网站建设 小程序开发 APP开发 网络营销
建站知识
网站建设 网站设计 网站制作 小程序
联系我们
公司地址 人才招聘
成都 重庆
电话：028-86922220
地址：成都市太升南路288号锦天国际A幢1002号
电话：028-86922220
地址：重庆市南岸区弹子石腾龙大道58号2栋21-6
版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4
在线咨询
服务热线
服务热线：028-86922220
TOP