上一章我们说 flex 布局的主轴、交叉轴以及容器中的父容器，今天我们就来说一下子容器。

容器

容器：分为 父容器（container)和 子容器（item）。

子容器

align-self

align-self：设置当前元素在交叉轴上（cross axis）的位置。如果当前设置了align-items，会覆盖调已有的align-items。

• align-sign：flex-start; // 起始端对齐

• align-self：end; // 末端对齐。

• align-self:center; // 居中对齐。

• align-self : baseline; // 基线对齐，默认对齐第一行文字的基线。

上面三个个属性，这里就不过多赘述了，懂得都懂(*￣︶￣)。

• align-self : strech; // 拉伸对齐。

拉伸的高度为所在父容器的高度。

flex

flex属性是flex-grow、flex-shrink和flex-basis的简写，所以一提到简写，他肯定就可以有一个值，两个值以及三个值的写法。不过先别急，我们先来说说这三个属性的功能。

• flex-grow：设置子容器尺寸在原基础的增长倍数。

• flex-shrink：设置子容器的收缩规则。子容器仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

• flex-basis：指定了子容器在主轴方向上的初始大小，默认是自身内容的尺寸。

// 一个值, 无单位数字: flex-growflex: 2;
// 一个值, width/height: flex-basisflex: 10em;flex: 30px;flex: min-content;
// 两个值: flex-grow | flex-basisflex: 1 30px;
// 两个值: flex-grow | flex-shrinkflex: 2 2;
// 三个值: flex-grow | flex-shrink | flex-basis flex: 2 2 10%;

好，今天就到这里了，今天努力的你依然是最棒的。Bye Bye！！！