首页 文章

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

提问于
浏览 次
19

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

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

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

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

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

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

  • Flex框中的 justify-items 属性是否与Grid中的 justify-items 属性相同？或者它们有什么不同？ （换句话说，我可以重用Grid的Flex-box文档）

  • （证明 - ）内容，自我和项目有什么作用？

  • （理由 - ）内容，自我和项目有何不同？

任何澄清将不胜感激 .

Edit: 由于每个人都不断给我提供Flex-box资源，我问的是css-grid，而不是flex-box .

css css3 css-grid

4 回答

  • 12

    回答你的问题：

    1

    正如reiallenramos提到的，"The justify-self and justify-items properties are not implemented in flexbox. This is due to the one-dimensional nature of flexbox, and that there may be multiple items along the axis, making it impossible to justify a single item. To align items along the main, inline axis in flexbox you use the justify-content property." - MDN

    2-3

    这个从W3拍摄的屏幕非常出色地展示了它们的作用以及它们之间的差异 .
    enter image description here

    好知道：

    有关更多信息和示例，我建议您查看：

    并获得一些灵感：

    回复于
  • 24

    _1379665_在CSS网格中的 justify-content ， justify-items 和 justify-self 之间：

    • justify-content 属性控制网格列的对齐方式 . 它设置在网格容器上 . 它不适用于或控制网格项的对齐 .

    • justify-items 属性控制网格项的对齐方式 . 它设置在网格容器上 .

    • justify-self 属性会覆盖单个项目的 justify-items . 默认情况下，它在网格项上设置并继承 justify-items 的值 .

    Example

    这是一个2x3网格 .

    • 2列，每列100px

    • 3行，每行高50px

    容器是：

    • 500px宽

    • 250px高

    enter image description here

    .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;
}

    <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>

    对齐内容

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

    enter image description here

    .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;
}

    <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>

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

    请注意，此属性仅在容器中有可用空间时有效 . 如果任何列的大小为 fr ，那么将消耗所有可用空间， justify-content 将无效 .

    justify-items

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

    enter image description here

    .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;
}

    <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>

    使用 justify-items: center ，网格项目在其列中居中 .

    自我辩护

    justify-self 属性会覆盖单个项目的 justify-items .

    enter image description here

    .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;
}

    <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>

    align-content，align-items和align-self

    这些属性与它们的 justify-* 对应物的作用相同，但是在垂直方向上 .

    更多这里：What is the difference between align-items vs. align-content in Grid Layout?

    Spec Reference

    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属性 . （重点补充）

    CSS Box对齐模块

    你写了：

    Flex-box中的justify-items属性是否与Grid中的justify-items属性相同？

    虽然Flex和Grid规范为关键字对齐属性提供了自己的定义，例如 justify-items 和 align-content ，W3C正在逐步淘汰各个盒子模型的对齐属性并实现新的Box Alignment Module，它试图定义一组对齐属性，以便在所有盒子模型中使用 .

    来自flexbox规范：

    1.2 . 模块交互CSS Box Alignment Module扩展并取代了此处介绍的对齐属性（justify-content，align-items，align-self，align-content）的定义 .

    Grid规范中有类似的引用 .

    回复于
  • 1

    好吧，我想我是想通过Michael_B来解决的 . 我的困惑来自这样一个事实：有时不同的属性会随机改变网格的布局 .

    justify-content 允许您将网格定位在其网格容器中 . 这就是为什么如果网格容器与网格的大小相同，则justify-content属性将不起作用 . （如果使用fr单位，情况总是如此） . 这也是它可以具有以下值的原因：空间，空间和空间均匀（除了开始，结束，居中和拉伸），这将分解网格并将网格项放置在网格容器中 . 这是 grid container 的属性 .

    justify-items 允许您为放置在网格's grid items (A grid item being a box in the grid, as defined in Michael_B'帖子中的内容设置默认位置 . 这是 grid container 的属性 .

    justify-self 允许您覆盖单个单元格中内容的默认位置 . 这将覆盖由justify-items设置的位置 . 因此，如果对容器的所有子项使用justify-self，则在网格容器上设置justify-items将不起作用 . 这是 content inside a grid item 的属性 .

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

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

    如果我有什么不对劲，请纠正我

    回复于
  • 0

    Justify-self 用于对齐内容在其单元格中的位置 horizontally .

    align-self 用于对齐内容在其单元格中的位置 vertically .

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

    THE RESULT FOR THE CODE justify-self: start;

    回复于

相关问题