第一步：开启flex布局
给父级的css设置display：flex。
第二步：设置主轴的对齐方式，用justify-content:center;使得子元素居中；
第三步：设置主轴的对齐方式，用justify-content:space-between;使在弹性盒子里的每个子盒子之间的间距一样；
第四步：设置主轴的对齐方式，用justify-content:space-evenly;使在弹性盒子里的每个子盒子之间左右的间距一样；
第五步：设置主轴的对齐方式，用justify-content:space-around;使在弹性盒子里的每个子盒子之间左右的间距一样；
第六步：设置flex的侧轴对齐方式
align-items：添加到弹性容器
align-self :控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子
属性值 作用
flex-start 默认值，起点开始依次排列
flex-end 终点开始依次排列
center 沿侧轴居中排列
stretch 默认值，弹性盒子沿着侧轴线被拉伸至铺满容器
注意：flex布局只适用于有父子级关系的父级。
第七步：设置侧轴的对齐方式为align-items：center;在垂直方向上是居中的了
第八步：测试前面加align-items:center; 后面又加align-items:stretch的效果：
发现后面没有层叠前面，而是加不加都一样的效果。
第九步：如果在第八步的基础上，不设置子级的高度，则效果如下：
发现子级被拉伸了。其实这是因为：无论我们设置不设置align-items：stretch；拉伸都是默认就有的，当子级盒子有高度时，子级盒子不会被拉伸；如果子级盒子没有高度时，会被拉伸。
第十步：如果给父级加了align-items，则所有它的子级都改了。
第十一步：属性align-self可以给单独的某个子级设置侧轴的对齐方式。
例如：单独给第二个子级盒子设置居中：
效果：
第十二步：如果子级没加高度，也没加align-items：stretch。
则子级的高度=父级的高度（弹性的表现）。
除此之外：
①当子级的侧轴对齐方式不是strrtch时，例如是center时，子级的高度=内容的高度
②当子级设置了高度时，则高度也不再是和父级一样高了。
第十三步：如果子级没给宽度的话，如果子级内容长，那宽度就宽，如果子级内容短，则宽度就窄。
第十四步：弹性伸缩比
让子级的盒子一般大，设置相同的比例即可。
第二个盒子占父级剩余宽度的全部：
刨去1盒子，把剩余的盒子分为两等分
