我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

上一篇文章说的是如何整体设置grid网格布局中子元素的对齐方式，结论就是除了stretch方式外，其它的对齐方式都会把子元素的背景色也inline掉（实际上是子元素inline了）。

苏南大叔：grid网格布局，单独设置子元素的水平对齐和竖直对齐方式 - 单独设置对齐方式grid
grid网格布局，单独设置子元素的水平对齐和竖直对齐方式（图4-1）

大家好，这里是苏南大叔的程序如此灵动博客，记录苏南大叔的所学所想。本文描述子元素在格子里面对齐方式，包括水平对方式齐和竖直对齐方式两种。本文涉及两个属性justify-self和align-self，是作用于父容器内部的某个或多个子元素上的，控制的是父容器内某个或者多个子元素的对齐方式。

前置内容

为了更好的理解本篇文章的内容，可以参考下面的两篇文章：

justify-items、align-items、place-items是作用在父元素上的属性。justify-self、align-self、place-self是作用在子元素上的属性。

水平对齐justify-self

justify-self和大家熟知的text-align是差不多的功用。
<style>
  .box {
    display: grid;
    grid-auto-columns: 200px;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 50px;
    border: 1px solid black;
    width: 320px;
    margin-top:3px;
  }
  .box > div { background: red; color:white; }
  .box > div:nth-child(2) { background: rgb(115, 255, 0); }
  #b1 > div:nth-child(1){ justify-self: start; }
  #b2 > div:nth-child(1){ justify-self: center; }
  #b3 > div:nth-child(1){ justify-self: end; }
  #b4 > div:nth-child(1){ justify-self: stretch; }
</style>
<div class="box" id="b0"><div>默认值</div><div>苏南大叔</div></div>
<div class="box" id="b1"><div>start</div><div>苏南大叔</div></div>
<div class="box" id="b2"><div>center</div><div>苏南大叔</div></div>
<div class="box" id="b3"><div>end</div><div>苏南大叔</div></div>
<div class="box" id="b4"><div>stretch</div><div>苏南大叔</div></div>

苏南大叔：grid网格布局，单独设置子元素的水平对齐和竖直对齐方式 - 水平对齐
grid网格布局，单独设置子元素的水平对齐和竖直对齐方式（图4-2）

竖直对齐align-self

align-self和大家熟知的vertical-align是差不多的功用。
<style>
  .box {
    display: grid;
    grid-auto-columns: 200px;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 50px;
    border: 1px solid black;
    width: 320px;
    margin-top:3px;
  }
  .box > div { background: red; color:white; }
  .box > div:nth-child(2) { background: rgb(115, 255, 0); }
  #b1 > div:nth-child(1){ align-self: start; }
  #b2 > div:nth-child(1){ align-self: center; }
  #b3 > div:nth-child(1){ align-self: end; }
  #b4 > div:nth-child(1){ align-self: stretch; }
  #b5 > div:nth-child(1){ align-self: baseline; }
</style>
<div class="box" id="b0"><div>默认值</div><div>苏南大叔</div></div>
<div class="box" id="b1"><div>start</div><div>苏南大叔</div></div>
<div class="box" id="b2"><div>center</div><div>苏南大叔</div></div>
<div class="box" id="b3"><div>end</div><div>苏南大叔</div></div>
<div class="box" id="b4"><div>stretch</div><div>苏南大叔</div></div>
<div class="box" id="b5"><div>baseline</div><div>苏南大叔</div></div>

苏南大叔：grid网格布局，单独设置子元素的水平对齐和竖直对齐方式 - 竖直对齐
grid网格布局，单独设置子元素的水平对齐和竖直对齐方式（图4-3）

两者的简写place-self

place-self=align-self+justify-self。

注意是先设置竖直，再设置水平。
<style>
  .box {
    display: grid;
    grid-auto-columns: 200px;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 50px;
    border: 1px solid black;
    width: 320px;
    margin-top:3px;
  }
  .box > div { background: red; color:white; }
  .box > div:nth-child(2) { background: rgb(115, 255, 0); }
  #b1 > div:nth-child(1){ place-self: start center; }
  #b2 > div:nth-child(1){ place-self: center end; }
  #b3 > div:nth-child(1){ place-self: end start; }
  #b4 > div:nth-child(1){ place-self: stretch center; }
</style>
<div class="box" id="b0"><div>默认值</div><div>苏南大叔</div></div>
<div class="box" id="b1"><div>start center</div><div>苏南大叔</div></div>
<div class="box" id="b2"><div>center end</div><div>苏南大叔</div></div>
<div class="box" id="b3"><div>end start</div><div>苏南大叔</div></div>
<div class="box" id="b4"><div>stretch center</div><div>苏南大叔</div></div>

苏南大叔：grid网格布局，单独设置子元素的水平对齐和竖直对齐方式 - 简写模式
grid网格布局，单独设置子元素的水平对齐和竖直对齐方式（图4-4）

对比flex

值得说明的是：flex布局也有类似的对齐属性。参考文章：

相关文章

总结

值得注意的是：不管是竖直还是水平，除了stretch效果。设置了哪里的对齐方式，背景色都会被跟着inline。似乎和预想的效果是不一样的。

更多css经验文章，请点击下面的链接：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   css