flex常用布局

垂直居中 子元素左右分布

.box{
	display:flex;
	align-items: center;
    justify-content: space-between;
}

---

水平垂直居中 图标在上文字在下

.box{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	flex-direction: column;
}

---

三个子元素平分父元素

.box{      
	display: flex;
	span{
		border: 1px solid #ccc;
		flex: 1;
		text-align: center;
	}
}

---

三个子元素平分父元素  两边对齐，中间平分

.box{
    display:flex;
    justify-content:space-between;
    div{
        width:22%;
    }
}

---

溢出换行 居中

//大盒子
.box{
    display: flex;
    flex-flow: row wrap;
}
//四个小盒子平分父级，背景色与父级一致  给20px的padding显示小盒子
.box .every_box{
    flex: 0 0 25%;
    padding: 20px;
    overflow: hidden;
}