欢迎来到计算机相关教程网!

CSS

当前位置: 主页 > 网页制作 > CSS

flex布局中,align-content和align-items居中的区别

时间:2023-05-05 21:34:23|栏目:CSS|点击:

align-conten适用于多行,

在单行情况下,align-items:center; 使元素居中,在交叉轴上居中对齐。 

单行时,设置align-content:center;无变化。 


flex-wrap:wrap;默认是多行,虽然父项宽度足够子项单行显示,设置了flex-wrap:wrap;后,子项表面仍显示单行但是align-content:center生效了,使单行元素整体居中。



多行

多行时,flex-wrap:wrap;使子项分成两行,align-items:center使子项在自己所在行的交叉轴上居中对齐。 

多行时,align-content:center将子项作为一个整体在交叉轴上对齐,单个子项并未在各自行居中对齐。 

与align-self比较

align-self使作用在单个子项上,可以覆盖住align-items的值 

align-self会覆盖align-items的值 

align-self:flex-end会覆盖align-conten:center的值,




align-items使子项在交叉轴对齐,单行多行皆可,单个子项也对齐。 

align-content在子项多行时整体对齐,单个子项保持原样。 

flex-wrap:wrap;可以使align-content呈现单行对齐(本质上还是多行,第二行高度为0)。 

align-self作用在子项上,可以覆盖align-items和align-content的值,作用范围不同。


上一篇:flex中的align-content和align-items的区别

栏    目:CSS

下一篇:css盒子模型详解

本文标题:flex布局中,align-content和align-items居中的区别

本文地址:http://www.wangzhanteacher.com/?m=home&c=View&a=index&aid=258

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:8044517 | 邮箱:8044517@qq.com

Copyright © 2022-2025 计算机相关教程网 版权所有冀ICP备17010187号