H5C3新特性总结(四)

一.弹性布局总结:
1.弹性布局介绍：会让子元素在主轴方向依次排列(相当于可以把子元素转为行内块元素);

2.弹性布局使用:
先在父盒子上开启display: flex(这句话意思是让子元素用弹性布局);

 2.1加在父元素身上的属性:
justify-content:设置元素在主轴方向的排列方式
            flex-start:在主轴起点对齐
            flex-end：在主轴终点对齐
            center：在主轴居中
            space-around：元素和元素之间有间距，两边也有间距
            space-between：元素和元素之间有间距，两边没有间距
flex-direction：设置主轴为哪个轴
            row：默认值，代表x轴为主轴
            column：代表y为主轴
	   row-reverse：还是以x为主轴，起点和终点会调换 一般不会用
            column-reverse：还是以y为主轴，起点和终点会调换 一般不会用.
align-items:设置子元素在副轴上的位置
		stretch:默认值,也是在副轴起点对齐,但是如果没有设置副轴方向的大小,它会占满父盒子的副轴方向;
		flex-start:仅仅就是在副轴起点对齐,如果没有设置副轴方向的大小,副轴方向的大小就用内容的大小;
		flex-end:在副轴终点对齐;
		center:在副轴居中.
flex-wrap:是否换行,给一个值wrap就是换行,不给就是不换行.
	      (开启换行后，弹性布局会计算出你一共有多少行, 例如计算出有2行，
	    那么它会把父元素的大小平分成2块区域,如果居中的话会各自在各自区域居中)
            
2.2加在子元素身上的属性(后面两个都是无聊属性):
flex:设置子元素在主轴方向上的占比,
	 如果子元素中大家写的flex值占比的值都一样，就代表平分, flex这个属性永远计算的是主轴方向剩余的大小.
align-self:单独设置子元素在副轴的对齐;
flex-basis:设置子元素在主轴方向的大小，可能是宽（x为主轴），也可能是高(y为主轴);

(未完继续)