网格布局中的盒模型对齐

2023-05-30 12:31| 来源: 网络整理| 查看: 265

与 align-items 和 align-self 用于对齐元素到块轴类似，justify-items 和 justify-self 用于对齐元素到行轴，可选值也和 align-self 一样。

auto normal start end center stretch baseline first baseline last baseline

借用上面演示过的设置 align-items 的示例，下面把它改为设置 justify-self 属性。

默认的对齐方式仍然是 stretch，除非元素具有固定宽高比。也就是说在默认情况下，网格元素会覆盖网格区域，除非改变它们的对齐方式。下面的例子中，第一个元素演示了默认的对齐效果：

* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; } .item1 { grid-area: a; } .item2 { grid-area: b; justify-self: start; } .item3 { grid-area: c; justify-self: end; } .item4 { grid-area: d; justify-self: center; } Item 1 Item 2 Item 3 Item 4

与 align-self 和 align-items 的关系类似，通过为网格容器设置 justify-items 属性，就相当于为所有的元素都设置了 justify-self 属性。

属性 justify-self 和 justify-items 在弹性盒布局中未被实现，这是因为弹性盒布局本质上是一维的，在轴上会有多个元素，无法单独对齐其中某一个元素。要在弹性盒布局中实现沿主轴（即行轴）上对齐元素，可以使用 justify-content 属性。

【本文地址】

网格布局中的盒模型对齐

网格布局中的盒模型对齐

今日新闻

推荐新闻