关于CSS3：CSS Grid中的justify-self，justify-items和justify-content之间的区别


The difference between justify-self, justify-items and justify-content in CSS Grid

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

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

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

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

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

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

  • Flex-box中的justify-items属性是否与
    网格中的justify-items属性？还是它们有所不同？
    (换句话说，我可以在Grid中重用Flex-box文档)
  • (合理化)内容，自我和物品做什么？
  • (合理化)内容，自我和物品有何不同？

    • 任何澄清将不胜感激。

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

    相关讨论

    要回答您的问题：

    1个

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

    2-3

    W3的此屏幕截图非常出色地展示了它们的工作以及它们之间的区别。
    enter image description here

    必知：

    有关更多信息和示例，建议您查看以下内容：

    • https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
    • https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
    • https://www.smashingmagazine.com/2017/12/grid-inspector/

    还有一些启发：

    • https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/

    CSS网格中justify-content，justify-items和justify-self之间的主要区别：

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

    例

    这是一个2x3的网格。

    • 2列，每列100像素宽
    • 3行，每行50px高

    容器是：

    • 500px宽
    • 250px高

    enter image description here

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    .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;
    }
    1
    2
    3
    4
    5
    6
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>

    justify-content

    justify-content属性使容器内的列对齐。

    enter image description here

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    .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;
    }
    1
    2
    3
    4
    5
    6
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>

    使用justify-content: space-between时，两列都固定在边缘。网格项仅因为它们存在于这些列中而移动。他们否则不受影响。

    请注意，只有在容器中有可用空间时，此属性才起作用。如果使用fr调整任何列的大小，则将消耗所有可用空间，并且justify-content无效。

    justify-items

    justify-items属性将网格项目在其轨道(而不是整个容器)内对齐

    enter image description here

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    .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;
    }
    1
    2
    3
    4
    5
    6
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>

    使用justify-items: center时，网格项目位于其列的中心。

    justify-self

    justify-self属性将覆盖单个项目上的justify-items。

    enter image description here

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    .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;
    }
    1
    2
    3
    4
    5
    6
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>

    align-content，align-items和align-self

    这些属性与它们的justify-*对应属性相同，但沿垂直方向。

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

    规格参考

    10.3. Row-axis Alignment: the justify-self and justify-items
    properties

    Grid items can be aligned in the inline dimension by using the
    justify-self property on the grid item or justify-items property
    on the grid container.

    10.4. Column-axis Alignment: the align-self and align-items
    properties

    Grid items can also be aligned in the block dimension (perpendicular
    to the inline dimension) by using the align-self property on the
    grid item or align-items property on the grid container.

    10.5. Aligning the Grid: the justify-content and align-content
    properties

    If the grid’s outer edges do not correspond to the grid container’s
    content edges (for example, if no columns are flex-sized), the grid
    tracks are aligned within the content box according to the
    justify-content and align-content properties on the grid
    container.

    (emphasis added)

    CSS盒子对齐模块

    你写了：

    Is the justify-items property in Flex-box the same as the justify-items property in Grid?

    尽管Flex和Grid规范为关键字对齐属性(例如justify-items和align-content)提供了自己的定义，但W3C正在逐步淘汰单个Box模型的对齐属性，并实现其新的Box Alignment Module，以寻求定义一组可以在所有盒模型中使用的路线属性。

    从flexbox规范：

    1.2. Module
    interactions

    The CSS Box Alignment Module extends and supercedes the definitions of
    the alignment properties (justify-content, align-items,
    align-self, align-content) introduced here.

    网格规范中有类似的参考。

    好的，我想我想通了Michael_B。我的困惑来自于这样一个事实，即有时不同的属性将不会随机改变网格布局的任何内容。

    justify-content允许您将网格放置在其网格容器中。这就是为什么如果网格容器的尺寸与网格相同，则justify-content属性将不起作用的原因。 (如果使用fr单位，总是这样)。这也是为什么它可以具有以下值的原因：周围的空间，之间的空间和均匀的空间(除了开始，结束，中心和拉伸)，这将破坏网格并将网格项放置在网格容器内。这是网格容器的属性。

    justify-items允许您为放置在网格的网格项目(网格项目是网格中的一个盒子，如Michael_B的帖子中所定义)中的内容设置默认位置。这是网格容器的属性。

    justify-self允许您覆盖单个单元格中内容的默认位置。这将覆盖由justify-items设置的位置。因此，如果在容器的所有子容器上使用justify-self，则在网格容器上设置justify-items将无效。这是网格项目中内容的属性。

    注意：如果您将网格项目本身设置为网格项目(换句话说，网格项目内的内容是网格)，则可以使用justify-self属性或justify-content将其放置在外部网格项目内内部网格的网格容器的属性，因为内部网格的网格容器是外部网格的网格项目的内容之一。

    如您所料，所有这些也适用于align- *属性。

    如果我做错了请纠正我

    Justify-self用于将内容在其单元格中的位置水平对齐。

    align-self是用于垂直对齐内容在其单元格中的位置。

    这是使用justify-self: start;对齐项目的结果

    代码justify-self: start;的结果