flex布局

flex布局

这篇文章主要给自己做笔记的

1. flex-direction属性: 定义子项在容器内的排列方向
	flex-direction: row | row-reverse | column | column-reverse;

2. flex-wrap属性: 定义子项在容器内的换行效果
	flex-wrap: nowrap | wrap | wrap-reverse;

3. flex-flow属性: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式
	flex-flow: <flex-direction> || <flex-wrap>;

4. justify-content属性: 定义子项在容器内水平对齐方式
	justify-content: flex-start | flex-end | center | space-between | space-around; 

5. align-items属性: 定义子项在容器内与主轴垂直（主轴方向有flex-direction决定）对齐方式
	align-items: flex-start | flex-end | center | baseline | stretch; 

6. align-content属性: 定义多行子项在容器内整体垂直对齐方式，常用于多根轴线的对齐方式。如果项目只有一根轴线，该	属性不起作用。
	align-content: flex-start | flex-end | center | space-between | space-around | stretch; 

7. Order属性: 定义排列顺序，数值小的排在前面。
	order:<integer>  　　/* 传入整数，default 0 */

8. flex-grow属性: 定义子项宽度之和不足父元素宽度时，子项拉伸的比例
	flex-grow: <number>  　　/*传入数字，default 0 */

9. flex-shrink属性: 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，定义子项宽度之和超过父元素宽		度时，子项缩放的比例。
	flex-shrink：<number> 　　/*default 1 */

10. flex-basis属性: 定义子项的初始宽度，若子项宽度之和超过父元素宽度时，子项按照flex-basis的比例缩放
	flex-basis：<length> | <percentage>;　　/* default auto*/

11. flex属性: flex属性是flex-grow, flex-shrink 和 flex-basis的简写，
	默认值为0 1 auto。后两个属性可选。
	flex:none | <flex-grow>  <flex-shrink>  <flex-basis>

12. align-self属性: 定义单个子项与其他项目不一样的对齐方式
	align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖父容器的align-items属性。默认值为auto，表	示继承父容器的align-items属性，如果没有父容器，则等同于stretch。
	align-self: auto | flex-start | flex-end | center | baseline | stretch;　
	/*该属性可能取6个值，除	  了auto，其他都与align-items属性完全一致。*/