flex弹性布局

小结:使用flex布局之后，就没有行内元素还块级元素之分，一个a标签可以直接给宽度和高度, 也不会脱标啦!

display:flex;  给父级添加,子盒子生效

设置主轴方向:

flex-direction:row 默认是x轴

flex-direction:column   把Y轴设置成主轴             

主轴的相关属性:

just-content:flex-start ;    主轴从左到右排列

just-content:flex-end ;     主轴从右到左排列

just-content:center ;        主轴水平居中

just-content:space-around ; 1:2的比例

 just-content:space-between; 靠两边对齐

 just-content:space-evenly; 1:1对齐

侧轴的相关属性:

align-items: start;  侧轴从上到下

align-items:flex-end; 侧轴从下到上

 align-items:center; 侧轴居中对齐

align-items: stretch; 拉伸       注意点:但是子盒子不要给高度

侧轴多行的相关属性:

align-content:属性和主轴的所有属性相同喔~~~

(flex布局中,默认子元素是不换行的,如果装不下就会缩小子元素的宽度,放到父元素里面)

弹性盒子换行:

flex-wrap:wrap ;