「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战」 。
侧轴对齐方式：
1.align-items:
添加到弹性容器，但是控制的是里面的子元素
2.align-self：
控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子 属性值：
(1)center:沿着测轴居中排列
（2）stretch:，弹性盒子沿主轴线被拉伸至铺满容器（如果给子盒子设置高度，则没效果）（默认值） (a)父元素有高，子元素没有高，子元素就会拉伸的和父元素一样高
（b）子元素有高，父元素没有高，父元素会被子元素撑开
（c）父元素有高，子元素也有高，各高各的，高度互不相关
（d）父元素没有高，子元素也没有高，高度会被子元素里面的内容撑开 （3）flex-end:侧轴结束的位置对齐
（4）flex-start:测轴开始的位置对齐
注意：align-items:stretch是给父元素的所有子元素设置拉伸。align-self：stretch是给单个子元素设置拉伸
3.单个子元素不设置宽高，也可以水平垂直居中（行内元素和块级都可以）：
（1）justify-content：center;(水平居中)
（2）align-items：center;（垂直居中）
4.flex布局的优点：
（1）可以设置宽高的百分比，让网页自适应。使得布局更加简单
（2）不需要担心脱标带来的问题
5.flex伸缩比：
（1）属性：flex
（2）取值分类：整数数值（只占用父盒子剩余尺寸的份数）
（3）份数的划分：
（a）没有子元素设置宽度：1份的份数=父元素的宽度/flex的总数，
(b)部分子元素设置了宽度：一份的份数 = （父元素的宽度-已经设置的宽度）/flex的总数，再按照分别写的flex数值进行分配就好。
挤压变形的解决办法：给会变形的盒子宽高固定
6. 改变主轴的方向：
（1）属性：flex-direction
（2）属性值： column:主轴垂直 column-reverse 主轴垂直反向（从下往上） row主轴水平（默认值） row-reverse:主轴水平反向（从右往左）
主轴改变之后，它的主轴方向的均匀分布同样可以用。只不过方向同主轴方向一同变化了
7.换行
属性：flex-warp 属性值： （1）warp:换行 （2）nowarp:不换行
8.多行对齐方式：
（1）属性：align-content
（2）属性值： a.center 居中
b.stretch 默认值拉伸
c.space-around
d.space-between
e.flex-start 侧轴开始的位置对齐
f.flex-end 侧轴结束的位置对齐
属性值和justify-content基本相似
