解决flex最后一排左对齐问题 justify-content: space-between或space-around

虛掷、青春

于 2021-01-18 11:28:35 发布

阅读量1.2k

点赞数

分类专栏： css 文章标签： flex css html js javascript

本文链接：https://blog.youkuaiyun.com/weixin_44642410/article/details/112768459

版权

本文探讨了在使用Flex布局时，如何处理最后一排元素左对齐的常见问题。通过深入理解`justify-content: space-between`和`space-around`属性的工作原理，我们将找到有效的解决方案。详细解释了这两种方法的差异，并提供了实例代码，帮助开发者更好地理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{
    
			margin: 0;
		}
		.parent {
    
			width: 100vw;
			height: 100vh;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			flex-direction: row;

最低0.47元/天解锁文章