align-self

CSS属性 align-self 会对齐当前 grid 或 flex 行中的元素，并覆盖已有的 align-items 的值。In Grid, it aligns the item inside the grid area. 在 Flexbox 中，会按照 cross axis（当前 flex 元素排列方向的垂直方向）进行排列。

值

auto:设置为父元素的 align-items 值。

normal:

效果取决于当前的布局模式:

绝对定位布局中，normal在绝对定位的替代元素上表现为start，在所有其他绝对定位元素上表现为stretch。
在绝对定位的静态元素上表现为stretch。
flex布局中表现为stretch。
在网格布局中表现为stretch,除了有部分比例或者一个固定大小的盒子的效果像start。
在块级和表格单元中无效。

flex-start:对齐到cross-axis的首端

flex-end:对齐到cross-axis的尾端

center:对齐到cross-axis的中间，如果该元素的 cross-size 尺寸大于 flex 容器，将在两个方向均等溢出。

safe:如果元素大小溢出对齐的容器，则将元素改为对齐，就像start

unsafe:无论元素和对齐容器的相对大小如何都遵循给定的对齐值

eg

HTML

<section>
    <div>
        Item#1
    </div>
    <div>
        Item#2
    </div>
    <div>
        Item#3
    </div>
</section>

CSS

section {
  display: flex;
  align-items: center;
  height: 120px;
  background: beige;
}

div {
  height: 60px;
  background: cyan;
  margin: 5px;
}

div:nth-child(3) {
  align-self: flex-end;
  background: pink;
}

align-items

CSS align-items属性将所有直接子节点上的align-self值设置为一个组。目前，Flexbox和CSS网格布局支持此属性。在Flexbox中，它控制十字轴上项目的对齐方式，在网格布局中，它控制块轴上项目的对齐方式。

align-content

align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。

/* 基本位置对齐 */
/*align-content不采用左右值 */
align-content: center;     /* 将项目放置在中点 */
align-content: start;      /* 最先放置项目 */
align-content: end;        /* 最后放置项目 */
align-content: flex-start; /* 从起始点开始放置flex元素 */
align-content: flex-end;   /* 从终止点开始放置flex元素 */

/* 默认对齐 */
align-content: normal;

/*基线对齐*/
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* 分布式对齐 */
align-content: space-between; /* 均匀分布项目
                                 第一项与起始点齐平，
                                 最后一项与终止点齐平 */
align-content: space-around;  /* 均匀分布项目
                                 项目在两端有一半大小的空间*/
align-content: space-evenly;  /* 均匀分布项目
                                 项目周围有相等的空间 */
align-content: stretch;       /* 均匀分布项目
                                 拉伸‘自动’-大小的项目以充满容器 */

/* 溢出对齐 */
align-content: safe center;
align-content: unsafe center;

/* 全局属性 */
align-content: inherit; /* 继承 */
align-content: initial;  /* 初始值 */
align-content: unset; /* 未设置 */

justify-items

justify-items 属性为所有盒中的项目定义了默认的 justify-self ，可以使这些项目以默认方式沿适当轴线对齐到每个盒子。

justify-content

justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

/* Positional alignment */
justify-content: center;     /* 居中排列 */
justify-content: start;      /* Pack items from the start */
justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end;   /* 从行尾位置开始排列 */
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */

/* Baseline alignment */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* Distributed alignment */
justify-content: space-between;  /* 均匀排列每个元素
                                   首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around;  /* 均匀排列每个元素
                                   每个元素周围分配相同的空间 */
justify-content: space-evenly;  /* 均匀排列每个元素
                                   每个元素之间的间隔相等 */
justify-content: stretch;       /* 均匀排列每个元素
                                   'auto'-sized 的元素会被拉伸以适应容器的大小 */

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

justify-self

[justify-self 在 Flexbox布局中失效]

在主轴上，Flexbox将我们的内容作为一个组进行处理。计算布置子元素所需的空间量，然后剩余空间可用于分配。 justify-content属性控制剩余空间的使用方式。设置justify-content：flex-end，额外空间放在所有子元素之前，justify-content：space-around，它放在该维度的子元素的两侧，等等。

这意味着在Flexbox中，justify-self属性没有意义，因为我们总是处理移动整个元素组。

在十字轴上，align-self是有意义的，因为我们可能在该维度中的flex容器中有额外的空间，其中单个元素可以移动到开始和结束位置。

小柒

align-self,align-item,align-content