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

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

《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布局不太了解的点这里

    原文作者:前端-阿杰
    原文地址: https://blog.csdn.net/weixin_50343572/article/details/116757120
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞