flex布局中,align-content和align-items居中的区别
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
本文标题:flex布局中,align-content和align-items居中的区别
本文地址:http://www.wangzhanteacher.com/?m=home&c=View&a=index&aid=258
您可能感兴趣的文章
- 05-13精灵图
- 05-13flex布局
- 05-05css盒子模型详解
- 05-05flex布局中,align-content和align-items居中的区别
- 10-13flex中的align-content和align-items的区别
- 10-13animation steps属性的解释说明
- 10-06perspective用在父元素和子元素上的区别
- 10-06perspective和perspective-3d的区别详解
- 10-06transform-origin详解
- 10-05css中,vmin和vmax的用法。


阅读排行
推荐教程
- 10-06transform-origin详解
- 09-11animation打字效果案例
- 09-04css如何实现文字分散对齐
- 10-13flex中的align-content和align-items的区别
- 05-05css盒子模型详解
- 08-13网页常用配色方案
- 10-06perspective用在父元素和子元素上的区别
- 09-15css中的inherit用法详解
- 09-11animation地图案例
- 10-05css中,vmin和vmax的用法。