flex布局

flex布局

display:flex 布局方式转换成弹性布局 (啥 ? 什么是弹性布局 ? 谁知道啊 ~~ )

.example {
	display: -webkit-flex;  /*Safari*/  
	display: flex; /*弹性布局*/
}

---

flex-direction 规定flex布局主轴(x轴)的方向

.example {
	display: flex;
	flex-direction: row; /*default 横向显示*/
	flex-direction: column; /* 纵向显示, 设置此属性会将子元素中的行内元素变为块级元素 */
	flex-direction: row-reverse; /*作用相同 方向相反*/
	flex-direction: column-reverse; /*作用相同 方向相反*/
	/****** Global values ******/
	flex-direction: inherit;  /*继承*/
	flex-direction: initial;  /*默认值*/
	flex-direction: unset;    /*撤销*/
}

---

flex-wrap 属性指定flex元素单行显示和多行显示

.example {
	display: flex;
	flex-wrap: nowrap; /*单行显示 */
	flex-wrap: wrap;    /*多行显示 */
	flex-wrap: wrap-reverse; /*多行显示 反转方向 */
}

---

justify-content 属性定义如何分配父容器主轴方向(x轴)中弹性元素的空间布局

.example {
	display: flex;  /*转换为弹性布局*/
	justify-content: space-between;  /*两端对齐*/ /*首个元素放置于起点  末尾元素放置于终点 其他元素均匀排列*/
	justify-content: center; /*居中对齐*/
	justify-content: space-around;  /*均分空间 每个元素占相同空间*/
	justify-content: flex-start; /* default  从行首起始位置开始排列*/
	justify-content: flex-end; /* 从行尾位置开始排列 */
	/* Global values */
	justify-content: inherit;
	justify-content: initial;
	justify-content: unset;
}

---

align-items 属性定义父容器侧轴(y轴)方向中弹性元素的位置

.example {
	display: flex;
	align-items: center; /*垂直居中*/
	align-items: flex-start; /*起点对齐*/
	align-items: flex-end; /*尾部对齐*/
	align-items: baseline; /*基线对齐*/
	align-items: stretch; /* defalut 将子元素拉伸至与父容器同样高度*/
}

---

align-self aligin-items给父元素设置 align-self给子元素设置

.example{
	display: flex;
	.child{
		align-self: center; /*垂直居中*/
		// . . . . 
		// 如果父元素设置了align-items 则会覆盖
	}
}

---

规定该子元素在所有子元素中所占比重,定义弹性盒子项（flex item）的拉伸因子

.example {
	flex-grow: 1;
	flex-grow: 2;
	flex-grow: 3;
	/****** Global values ******/
	flex-grow: inherit
}

---

一些必要的属性

规定盒模型 边框和padding包含在宽高内部

* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

---

IOS 端滑动视图不平滑解决办法

.example {
	-webkit-overflow-scrolling : touch;
}

---

未完待续