那些遇到过的问题

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

kei*_*e96 36 css css3 css-grid

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

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

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

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

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

但我仍然不明白它们之间的区别是什么.所以,我有3个问题要澄清.

  1. 是justify-items在Flex的框属性相同 justify-items的网格属性？或者它们有什么不同？(换句话说,我可以重用Grid的Flex-box文档)
  2. (证明 - )内容,自我和项目有什么作用？
  3. 如何(证明 - )内容,自我和项目有何不同？

任何澄清将不胜感激.

编辑:由于每个人都不断给我Flex-box资源,我问的是css-grid,而不是flex-box.

L B*_*ahr 44

回答你的问题:

1

正如reiallenramos所提到的那样,"自我辩解和对齐物品属性并没有在flexbox中实现.这是由于flexbox的一维特性,沿着轴可能有多个项目,因此无法证明单个item.要在flexbox中沿主要内联轴对齐项目,请使用justify-content属性." - MDN

2-3

从W3拍摄的这个屏幕非常出色地展示了它们的作用以及它们之间的差异. 在此输入图像描述

好知道:

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

并获得一些灵感:

  • W3的图像不清晰。 (5认同)

Mic*_*l_B 27

主要差异之间justify-content,justify-items并justify-self在CSS电网:

  • 该justify-content属性控制网格列的对齐方式.它设置在网格容器上.它不适用于或控制网格项的对齐.
  • 该justify-items属性控制网格项的对齐方式.它设置在网格容器上.
  • 该justify-self属性覆盖justify-items单个项.默认情况下,它在网格项上设置并继承值justify-items.

例

这是一个2x3网格.

  • 2列,每列100px
  • 3排,每排50px高

容器是:

  • 500px宽
  • 250px高

在此输入图像描述

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>
Run Code Online (Sandbox Code Playgroud)

justify-content

该justify-content属性对齐容器中的列.

在此输入图像描述

.container {
  justify-content: space-between;
}

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>
Run Code Online (Sandbox Code Playgroud)

随着justify-content: space-between两列都寄托到边缘.网格项只会因为它们存在于这些列中而移动.否则他们不会受到影响.

请注意,此属性仅在容器中有可用空间时有效.如果任何列的大小都是fr,那么将消耗所有可用空间,并且justify-content不会产生任何影响.

justify-items

该justify-items属性对齐其轨道中的网格项(而不是整个容器)

在此输入图像描述

.container {
  justify-items: center;
}

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>
Run Code Online (Sandbox Code Playgroud)

随着justify-items: center电网项目的列内居中.

justify-self

该justify-self属性覆盖justify-items单个项.

在此输入图像描述

.container        { justify-items: center;}
.box:nth-child(2) { justify-self: start; }
.box:nth-child(3) { justify-self: end; }
.box:nth-child(6) { justify-self: stretch; }


.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>
Run Code Online (Sandbox Code Playgroud)

align-content,align-items和align-self

这些属性与justify-*对应属性相同,但在垂直方向上.

更多信息:网格布局中的align-items与align-content有什么区别？

规格参考

10.3.行轴对齐:justify-self和justify-items 属性

电网项目可以在维联,通过使用对齐 justify-self网格上的物品或财产justify-items网格容器上属性.

10.4.列轴对齐:align-self和align-items 属性

通过使用网格容器align-self上的网格项或align-items属性上的属性,网格项也可以在块尺寸(垂直于内联尺寸)中对齐.

10.5.对齐网格:justify-content和align-content 属性

如果网格的外边缘与网格容器的内容边缘不对应(例如,如果没有列是弹性大小的),则网格轨道将根据网格容器上的justify-content和align-content属性在内容框中对齐 .

(重点补充)

CSS Box对齐模块

你写了:

是justify-items在Flex的框属性相同justify-items的网格属性？

尽管Flex和Grid规范为关键字对齐属性提供了自己的定义,例如justify-items和align-content,W3C正在逐步淘汰各个盒子模型的对齐属性并实现他们的新Box对齐模块,该模块试图定义一组对齐在所有箱型号中使用的属性.

来自flexbox规范:

1.2.模块交互

CSS盒对准模块延伸,并且取代了取向性的(定义justify-content,align-items, align-self,align-content这里引入).

Grid规范中有类似的引用.

  • 这应该被接受的答案。如果你对所有的例子都做中心，而不是 1 中心，1 左，那就更好了 (2认同)
  • 我第一次真正看到这个概念得到很好的解释。非常感谢您的精彩解释！ (2认同)

归档时间：

查看次数：

12721 次

最近记录：

7 年，2 月 前
在CSS Flexbox中,为什么没有"justify-items"和"justify-self"属性？ 602
网格布局中align-items与align-content有什么区别？ 3
更多相关链接
相关归档
仅使用css翻转/反转/镜像文本 55
我可以设置textarea的resize抓取器的样式吗？ 33
在CSS中定位itemprop？ 27
未设置带填充的边框框div上的最大高度 13
在AngularJS中为每个第n个元素自定义ng-repeat 12
根据屏幕大小隐藏和显示元素 7
:带有ng-repeat的第一个孩子 6
在CSS Grid Layout中为每列添加滚动 6
CSS边界半径验证错误 1
内联元素的box-shadow 1
难疑归档
如何在提交前撤消'git add'？ 8567
在Python中查找包含它的列表的项目的索引 2887
如何在Web表单字段/输入标记上禁用浏览器自动完成？ 2680
如何使用逗号作为千位分隔符在JavaScript中打印数字 1589
如何在Git中完全替换另一个分支中的master分支？ 1549
确定整数平方根是否为整数的最快方法 1403
你什么时候应该使用escape而不是encodeURI/encodeURIComponent？ 1371
迭代集合,在循环中删除对象时避免使用ConcurrentModificationException 1158
如何在悬停而不是单击时使Twitter Bootstrap菜单下拉列表 1146
如何将本地jar文件添加到Maven项目？ 1053