弹性布局解决让计算机自己等比例分配
flex布局可以快速实现元素一行显示，并且不脱标
给父元素设置display：flex(元素在一行显示)
让元素水平垂直居中给父元素设置
align-items:center
justify-content:center
使用步骤
需要哪些元素在一行显示，就给他们的直接父元素设置display：flex
伸缩盒子让元素在一行显示的原因
伸缩盒子中有2条轴 ，主轴和侧轴，在伸缩盒子中所有的子元素都是沿着主轴方向显示
如果希望元素独占一行显示（也就是让元素竖着显示），
flex-direction:row（横着显示，默认就是横着显示）
flex-direction:row-reverse(横着，反向显示)
flex-direction:column(元素就竖着显示了)
flex-direction:column(元素就竖着，反向显示)
设置子元素在主轴方向的布局方式——justify-content：*
使用flex-end的话，把本身排列的123，挪到末尾 123的顺序不变
justify-content:center(元素水平居中)
设置元素在侧轴方向的布局方式
align-items：stretch
默认值 拉伸效果高度100%（注意这个效果的实现，必须子元素没有设置固定高度的前提下）也就是用了伸缩盒子后，子元素不设置高度的话，默认就是高度100%
所以正常情况下用伸缩盒子，子元素必须要设置高度
align-item：flex-end在侧轴结束位置排列
align-item：center（在侧轴居中位置显示）
下图中多了个align-items:baseline(对齐方式如下图，还是有点用的)
2个div中的文字要对齐，可以使用align-items:baseline（侧轴，基线对齐的方式）
若有收获，就点个赞吧
0 人点赞
