什么是宽高自适应呢?
页面里有两个 div，开始的时候宽度都是 800px，当我们将浏览器窗口的宽度拖动到小于 800px 的时候，我们发现：上面的 div 宽度固定，一部分被隐藏在屏幕外;下面 div 的宽度会自动适应 屏幕宽度缩小 的变化。
我们把这种元素的宽或高，能够随着屏幕的宽高变化而变化的能力，叫做宽高自适应。
1. 自适应内容宽度
当flex-direction设置为column时，子元素默认会充满整行。如果希望子元素根据内容自适应宽度，可以将align-self设置为baseline或flex-start。
2. 特殊布局的实现
利用margin: auto可以实现一些特殊的布局效果。例如，通过设置左边的包裹div免去，直接使用margin: auto来实现结构打平一层的效果。
3. 交叉轴上的位置控制
使用align-self属性可以在交叉轴(Cross Axis)上对单个元素进行位置控制。这对于需要在列布局中调整个别元素位置的情况非常有用。
4. 等宽不同高度的列
通过设置flex: 1;给所有项目分配等比例宽度，同时允许它们根据内容自动调整高度。这样可以创建出等宽但不同高度的列布局。
