flex布局-图片上下两端对齐文字

在写样式的时候我们会经常碰见这种样式，一般商品信息或者用户信息都会这样设计。有的时候会不知道怎么布局，今天我叫大家一个最简单的方法。

	//1.我们先给父盒子属性,使其头像盒子和文字盒子在一行并且左右贴两边
	.fatherBox {
     
		display: flex;
    	align-items: center;
    	justify-content: space-between;
	}
	//2.然后给头像盒子和文字盒子一样的高度。
	.ImgBox {
     
		width：100px；
		height：100px；
	}
	//3.最后给文字盒子加上最关键的属性：flex-direction: column;
	.TextBox {
     
		width：100px；
		height：100px；
		display: flex;
    	flex-direction: column;
    	justify-content: space-between;
	}

这样就完成了上面的用户信息效果，是不是很方便啊。如果对flex布局不太了解的点这里，里面有flex的完全解释！