当前位置: 首页 > 面试题库 >

CSS网格中justify-self,justify-items和justify-content之间的区别

乜元魁
2023-03-14
问题内容

我真的很困惑 在查找在线资源和文档时,这些属性的大多数文档似乎都引用了Flex-box,而不是网格。
而且我不知道Flex-box中等效属性的文档对网格的适用性如何。

因此,我尝试参考https://css-tricks.com/snippets/css/complete-guide-grid/,其定义如下:

justify- items-使网格项内的内容沿行轴对齐

justify- content-此属性使网格沿行轴对齐

自我证明 -使网格项内的内容沿行轴对齐

但是我仍然不了解它们之间的区别。因此,我有3个问题需要澄清。

  1. 是justify-items在Flex的框属性相同justify-items的网格属性?还是它们有所不同?(换句话说,我可以在Grid中重用Flex-box文档)
    2.(合理化)内容,自我和物品做什么?
    3.(合理化)内容,自我和物品有何不同?任何澄清将不胜感激。

编辑:由于每个人都不断给我Flex-box资源,我问的是CSS网格,而不是flex-box。


问题答案:

正如reiallenramos所说:“ justify-self和justify-items属性未在flexbox中实现。这是由于flexbox的一维特性所致,并且沿轴可能有多个项目,因此无法证明单个项目的合理性。要在Flexbox中沿主内联轴对齐项目,请使用justify-content属性。” -



 类似资料:
  • 我真的很困惑。在查找联机资源和文档时,这些属性的大多数文档似乎都引用了Flex-box,而不是网格。我不知道Flex-box中等价属性的文档对网格有多适用。 因此,我尝试引用https://css-tricks.com/snippets/css/complete-guide-grid/,它将它们定义如下: justify-items-将网格项内的内容沿行轴对齐 null 如有任何澄清,将不胜感激。

  • 问题内容: 考虑伸缩容器的主轴和横轴: 要沿主轴对齐弹性项目,有一个属性: 要沿十字轴对齐弹性项目,需要三个属性: 主轴是水平的,而横轴是垂直的。这些是flex容器的默认方向。 但是,这些方向可以轻松地与酒店互换。 (交叉轴始终垂直于主轴。) 在描述轴的工作方式时,我的观点是,任一方向似乎都没有什么特别之处。主轴,横轴在重要性上都相同,并且flex-direction可以轻松地来回切换。 那么,为

  • 此方法用于根据长度值添加对齐或修剪字符串值。 语法 (Syntax) justify(string,length) 参数 (Parameters) String - 需要进行对齐的字符串值。 Length - 理由的值。 返回值 (Return Value) 返回对齐的字符串值。 例子 (Example) /* Main program */ options arexx_bifs say j

  • justify-content (轴内)对齐方式 justify-content 属性可以改变项目在容器中的对齐方式。 1. 官方定义 justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。 2. 慕课解释 justify-content 它主要用来设置每行里面项目的排列规则,一共有 5 种设置。 3. 语法 justify-content: flex-star

  • 本文向大家介绍justify-content的space-between与around有什么区别?相关面试题,主要包含被问及justify-content的space-between与around有什么区别?时的应答技巧和注意事项,需要的朋友参考一下 justify-content 定义了在 flex 容器中,沿着主轴的布局方式 space-between: 行内均匀分布元素,距离相同,首尾元素距

  • 这个属性不怎么常用,因为它的兼容性不好,只兼容 IE 浏览器,它主要是给对齐属性text-align:justify做一个补充。 1. 官方定义 改变字与字之间的间距使得每行对齐。 2. 慕课解释 这个属性主要用来页面文字的排版,如果我们一个段落不设置任何属性,那么它的每一行有长有短,很不美观,通过这个属性,可以让每一行都能实现左右对齐。 我们首先要设置text-align:justify然后再设