flex 布局设置最后一个元素靠右 margin-left: auto

最新推荐文章于 2023-07-25 13:28:13 发布

江小虫儿

最新推荐文章于 2023-07-25 13:28:13 发布

阅读量2.3k

点赞数 2

分类专栏：前端开发文章标签： css css3 前端

本文链接：https://blog.csdn.net/kate_sicheng/article/details/128043454

版权

前端开发专栏收录该内容

42 篇文章 1 订阅

订阅专栏

示例

<div class="parent">
	<div class='son1'>A</div>
	<div class='son2'>B</div>
	<div class='son3'>C</div>
</div>

	.parent {
		display: flex;  ⭐️⭐️⭐️
		align-items:center;
		width: 300px;
		height: 50px;
		border: 1px solid black;
	}
	
	.son1,.son2,.son3 {
		height: 30px;
		line-height: 30px;
		width: 30px;
		border: 1px solid black;
		border-radius: 4px;
		text-align: center;
	}
	
	.son1,.son2 {
		margin-left: 10px;
	}
	.son3 {
		margin-left: auto;   ⭐️⭐️⭐️
		margin-right: 10px;
	}