弹性盒子添加在父元素和子元素上的相关属性总结

在父元素上面有 创建弹性容器 设置主轴方向 主轴方向上的对齐方式，留白空间。交叉轴的对齐方式 一根轴线上排不下时的对齐方式 以及多根轴线的对齐方式
弹性子元素相关属性 有排列次序 当弹性子元素少，父元素大时，有留白空间 有放大比例设置 不够的情况下缩小比例设置 单个某一个子元素的对齐方式。

下面这些都是添加在父元素上的属性
创建弹性容器
父元素上创建：display:flex; 就是将元素设置为弹性容器。若子元素过多时，会有缩放，相当于浮动，但是区别于浮动的一点是其宽高仍然存在。
display:inline-flex; 类似于行内元素。
设置flex之后，子元素的float clear vertical 都会失效
设置主轴方向
flex-direction:row; row-reverse;
column column-reverse
主轴方向上的对齐方式
justify-content:flex-start;子元素位于弹性盒的开头
flex-end;子元素位于弹性盒的结尾，
要和主轴的反转区别：比如反转是主轴跑到了右边，从右到左为box1 box2 box3。这个是从左到右box1 box2 box3 /
center;子元素位于弹性盒中间
主轴方向上子元素的留白空间：
justify-content: space-around; / 子元素之前之后中间都有空白空间 /
justify-content: space-between; / 子元素之前之后都没有空白空间，只有子元素中间有空白空间 /
交叉轴方向上的对齐方式：
align-items: stretch; / stretch的英文翻译是拉长、撑大、有弹性 /
/ 默认值 如果子元素没有高度或者高度为自动(auto)时，将占满整个容器的高。 /
align-items: flex-start; / 子元素在交叉轴的起点对齐 /
align-items: flex-end; / 子元素在交叉轴的终点对齐 /
align-items: center; /子元素在交叉轴的中点对齐 /
align-items: baseline;/ 子元素在第一行文字的基线对齐 /
交叉轴方向上的留白空间：没有
设置弹性子元素在一根轴线上排不下时的换行方式。
flex-wrap: nowrap; / 默认值，不换行 /
flex-wrap: wrap;/ 换行 ，换行之后宽度都变的一致，即为自己设置的宽度，它不再会对自己做压缩/
flex-wrap: wrap-reverse;/ 换行，换行之后宽度一致，即为自己设置的宽度，它不再会对自己做压缩，而且第一行显示在下方 /
设置多根轴线的对齐方式：
align-content属性：设置多根轴线的对齐方式，如果只有一根轴线，属性失效。
flex-wrap: wrap;/这是换行操作，换行之后宽度都变的一致，即为自己设置的宽度，它不再会对自己的宽高做压缩/
align-content: stretch;/默认值，轴线占满整个交叉轴.这个属性曾在交叉轴垂直对齐方式出现过/
align-content: flex-start;/ 与交叉轴的起点对齐 /
align-content: flex-end;/ 与交叉轴的终点对齐 /
align-content: center; / 与交叉轴的中点对齐 /
align-content: space-around;/ 在交叉轴的之上、中间、之下都有空间
align-content: space-between; /* 只在交叉轴的轴线中间有留白 /
下面这些都是添加在子元素上的属性
order属性：调整子元素的排列次序
order:数值；数值不加单位，默认值为0，数值越大，排列越靠后
flow-grow属性：调整子元素的放大比例。
flex-grow: 0; / 0表示正常状态，不放大 /
/ 1表示一旦发生变化，弹性子元素的宽度也会做出相应的调整。
1表示把剩下的剩余空间分成三份，一个子元素都占其中的一份 /
flex-grow: 2; / nth-child(2)相当于是挑出子元素中的第二个盒子进行设置，设置为2之后，发现wrap2相当于分成了四份，box2自己占了两份。 /
flex-shrink: 0;/ 因为弹性盒子display:flex设置之后，当盒子个数过多时，小盒子会自动缩放，当拉着浏览器的右侧伸缩时，盒子会跟着伸缩，一起缩放。但是加了flex-shrink之后，盒子就不会跟着缩放了，实实在在的有多宽就是多宽，会出现水平滚动条 /
flex-shrink: 1;/ 设置为1之后就可以缩放了 /
align-self属性：调整弹性容器中被选中的子元素的对齐方式
align-self: auto;/ 默认值，继承了父容器的align-items属性，如果没有父元素，值为stretch /
align-self: stretch; / 占满整个容器的高度 /
align-self: flex-start; / 交叉轴的起点对齐 /
align-self: flex-end;/ 交叉轴的终点对齐 /
align-self: center;
align-self: baseline;/ 子元素的第一行文字的基线对齐 */

需要详细的属性解释和代码解释的可以留言