Flex布局,精简版笔记

• Flex容器(需要布局的父盒子),一共6个属性:

比较常用的属性大概是这样:

.box{
	display:flex;display: -webkit-flex; 
	flex-flow:row nowrap;
	justify-content:center;
	align-items:center;
	align-content:center;
}

属性详解

	display:flex;
	display: -webkit-flex; 
				/* Webkit 内核的浏览器，必须加上-webkit前缀*/;
	
	flex-direction: row | row-reverse | column | column-reverse;
				/* 主轴方向:横 | 横右 | 竖 | 倒竖 */
				
	flex-wrap: nowrap | wrap | wrap-reverse;
				/* 换行:不换 | 换 | 换行(倒着来) */
				
	flex-flow:row nowrap; 
				/* flex-direction属性和flex-wrap属性的缩写*/;
				
	justify-content: flex-start | flex-end | center | space-between | space-around;
				/* 主轴对齐:起点 | 终点 | 中间 | 两端 | 环绕*/
				
	align-items: flex-start | flex-end | center | baseline | stretch(默认);
				/* 交叉轴对齐:起点 | 终点 | 中间 | 基线 | 拉成它爸那么长*/
				
	align-content: flex-start | flex-end | center | space-between | space-around | stretch;
				/* 多行时儿子们的对齐:起点 | 终点 | 中间 | 两端 | 环绕 | 拉儿子填空*/

• Flex项目(儿子们),还是6个属性:

比较常用的属性大概是这样:

.item{
	order:0;
	flex:auto (1 1 auto) | none (0 0 auto);
	align-self
}

属性详解

	order:0; 
				/* 排列顺序,数值越小,排列越靠前,默认为0 */
	flex: 0 1 auto;
	
				/* flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选 */
				
	flex-grow: 0; 
				/* 放大比例,默认为0,0的时候不放大,一样的时候等比放大 */
				
	flex-shrink: 1; 
				/* 缩小比例,默认为1,0的时候不缩小,负值无效 */
				
	flex-basis:auto; 
				/* 儿子大小 */
				
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
				/* 单个儿子自己的对齐方式 */