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

所以,我试着引用https://css-tricks.com/snippets/css/complete-guide-grid/,它对它们的定义如下:

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

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

justify-self-沿行轴对齐网格项目内的内容

但是我还是不明白他们之间有什么不同.所以,我有三个问题要澄清.

  1. Flex box中的justify-items属性与
  2. 内容、self 和项目(对齐-)做什么?
  3. (对齐-)内容、self 和项目有什么不同?

任何澄清都将不胜感激.

Edit:因 for each 人都在给我Flex-box资源,所以我问的是CSS-GRID,而不是Flex-box.

推荐答案

To answer your questions:

1

正如reiallenramos提到的,"Flexbox中没有实现JUSTIFY-Self和JUSTIFY-Items属性.这是由于FlexBox的一维性质,沿轴可能有多个项目,因此不可能对齐单个项目.要在FlexBox中沿主内联轴对齐项目,可以使用JUSTUST-CONTENT属性."-MDN

2-3

这张W3的屏幕截图很好地展示了它们的功能以及它们之间的差异.

Good To Knows:

有关更多信息和示例,我建议您查看:

还有一些启发:

Css相关问答推荐

如何使搜索框扩展并溢出其他内容

如何使重复线性渐变适合字体大小?

寻找组件中最大的元素来设置其他组件的高度

没有 colored颜色 Select 器的 JavaFX colored颜色 Select 器

在revealjs/Quarto中定义一类反背景的幻灯片

带填充的水平边框

使用 Webpack5 在 CSS 文件中内联字体和图像?

Ant Design:将位置子菜单移动到屏幕顶部

如何使半圆的边框淡出?

位置绝对混乱的 CSS Flexbox

BEM 块、命名和嵌套

将一行文本保留为单行 - 换行或不换行

无法使用 Bootstrap 3 更改占位符 colored颜色

仅针对直接子代而不是其他相同后代的 CSS Select 器

将未知大小的大图像居中在一个较小的 div 中,并隐藏溢出

CSS 表格 td 宽度 - 固定,不灵活

单选按钮和标签显示在同一行

输入和文本字段中的背景 colored颜色

如何水平对齐 span 或 div?

如何将 HTML
显示为内联元素?