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

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

苏南大叔:grid网格布局,单独设置子元素的水平对齐和竖直对齐方式 - 单独设置对齐方式grid
grid网格布局,单独设置子元素的水平对齐和竖直对齐方式(图4-1)

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

前置内容

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

justify-itemsalign-itemsplace-items是作用在父元素上的属性。justify-selfalign-selfplace-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