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

最新推荐文章于 2025-04-23 10:48:45 发布

原创最新推荐文章于 2025-04-23 10:48:45 发布 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

前端开发专栏收录该内容

42 篇文章

订阅专栏

该博客介绍了如何使用CSS的Flex布局属性来排列元素。示例中，`.parent`设置为Flex容器，使得`.son1`、`.son2`和`.son3`子元素按中心对齐。`.son1`和`.son2`左侧有10px的外边距，`.son3`通过`margin-left:auto`和`margin-right:10px`实现了右对齐。这种布局方式常用于响应式设计和复杂网页组件的排版。

示例

<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;
	}