flex弹性布局
-
flex与flex-grow的区别，都是分配剩余空间，但+grow就不会加入自生大小，而单独的flex就会加入自生空间。
-
容器：父元素
给谁添加flex谁就是容器，子元素就是项目
功能：1.所有的项目默认情况在一行显示。
2.如果所有的项目宽度之和大于容器的宽度。项目会自动缩小。 即不会超出容器的尺寸（不会换行）
-
项目：子元素
-
主轴：X轴（默认值）
-
设置换行
-
flex-wrap：nowrap 不换行（默认值）
-
flex-wrap：wrap 行换（当项目尺寸之和大于宽度才会起效）
-
flex-wrap：wrap-reverse 倒序换行（起始位置改为底部且主轴为X轴）
主轴(x轴)对齐方式
-
justify-content：flex-start 【默认值】（主轴对齐方式，左对齐）
-
justify-content：flex-end（主轴对齐方向，右对齐）
-
justify-content：center（主轴对齐方向，居中）
-
justify-content：space-between（主轴对齐方向，两端对齐）
-
justify-content：space-around（主轴对齐方向，分散对齐）
-
justify-content：space-evenly（主轴对齐方向，平均分配项目内容）
交叉轴(y轴)对齐方式
-
align-items：center 交叉轴居中
-
align-items：flex-start 交叉轴底部开始
-
align-items：flex-end 交叉轴底部倒序开始
-
align-items：baseline 交叉轴基线对齐
-
align-items：stretch 默认值，当项目高度为auto即未设置高度时，项目的高就是容器的高（即自动盛满容器）
