一、尽可能设置父元素的高度（这是最简单、灵活的方式）。然后通过设置子元素的 flex-basis，flex-shrink，flex-grow分配空间，再使用justify-content, align-items. align-content进行版式控制。
二、父元素不设置高度，依靠子元素的高度来撑开。这时的问题就是无法对 交叉轴 进行控制，只能对 主轴 控制。
三、flex-basis，flex-shrink，flex-grow只能控制 主轴 的空间占比。无法控制在 交叉轴 的占比，交叉轴的占比只对子元素设置height的值。此外这三个属性受限于 max-xxx, min-xxx属性。
四、flex-basis值为百分比时，且值大于50%时，会导致子元素由单行变为多行。
五、align-self是子元素自己控制自己在 交叉轴 上的位置。用来替代父元素的align-items,（一旦子元素设置了align-self，就会替代父元素的align-items值 。
1）子元素多行时，align-self受父元素的 align-content限制，设置了也无效。
2）子元素多行时，父元素未设置align-content时，align-self可不受父元素的align-items影响，在自己被分配的空间中，在交叉轴上 flex-start（顶对齐） center（居中）flex-end（底对齐）。
其它补充：
place-content 是 align-content 和 justify-content的简写。
place-items 是 align-items 和 justify-items（Grid)的简写。
MDN
/* 关键字值 */
flex: auto;
flex: initial;
flex: none;
/* 单值，无单位数字：flex-grow
flex-basis 此时等于 0。 */
flex: 2;
/* 单值，宽度/高度：flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;
/* 双值：flex-grow | flex-basis */
flex: 1 30px;
/* 双值：flex-grow | flex-shrink */
flex: 2 2;
/* 三值：flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* 全局值 */
flex: inherit;
flex: initial;
flex: revert;
flex: revert-layer;
flex: unset;
