本文介绍: 在弹性布局中,这四个属性设置center产生的效果如下justifycontent: 在单行多行中都是在主轴向上整体居中justifyitems:在弹性布局没有效果,该属性会被忽略aligncontent: 只在多行情况下有效多行元素整体居中单行多行都是在所在行中居中这里区别整体居中aligncontent)。

前言

在弹性盒子中常常将justifycontentalignitems两个属性定义center来使元素居中。而justifyitemsaligncontent两个属性使用常常会令人混淆本文就这四个属性展开分析


justifycontentaligncontent

分配主轴/次轴方向元素之间空间,以center为例直接上图理解


justifyitemsalignitems


总结

在弹性布局中,这四个属性设置center产生的效果如下

justifycontent: 在单行多行中都是在主轴向上整体居中

justifyitems:在弹性布局没有效果,该属性会被忽略

aligncontent: 只在多行情况下有效,多行元素整体居中

alignitems: 单行和多行都是在所在行中居中这里区别下整体居中(align-content)。

单行:justifycontent 主轴居中,align-items 次轴居中

多行:justifycontent 主轴居中, align-content 次轴整体居中, align-items行内居中

justify对应主轴,align对应次轴。content对应的是整体,items对应的是每个元素所在的那个周边区域

通过尝试所得,欢迎各位大佬指正~

原文地址:https://blog.csdn.net/grx1125/article/details/128785335

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_48720.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注