弹性盒子对齐方式总结【建议收藏】

1.设置主轴的方向:flex-direction

row===横向

row-reverse===反着的横向

column====纵向

column-reverse===反着的纵向

2.设置子元素在主轴上的对齐方式: justify-content

flex-start====在主轴的起点

flex-end===在主轴的终点

center===在主轴的中间

space-between===两端对齐，中间间距自动分配

space-around===中间元素的间距是贴边元素间距的2倍

space-evenly====元素的间距—致

3.设置子元素在侧轴上的对齐方式: align-items

flex-start===在侧轴的起点

flex-end===在侧]轴的终点

center===在侧轴的中间

baseline===基线对齐

strench===拉伸 == 要想看到拉伸的效果，子元素就不能设置宽度或者高度。
                                如果侧轴在纵向，就不定高度
                                如果侧|轴在横向，就不定宽度

4.多行的对齐方式：align-content

flex-start====全都放在起点，行与行没有间距

flex-end====全部放在终点，行与行没有间距

center====全部放在中间，行与行没有间距

space-between===第一行和最后一行贴边，中间行间距自动分配

space-around=====中间行间距是贴边行间距的2倍

如果实在不知道该用那个，就打开页面右键-【检查】-【元素】，用箭头选中你设置了弹性盒子的元素，下面就会出现：（如图所示）根据自己的需求调整即可。