Flex 布局对齐难题：子元素数量不等时的空间分配
本文分析一个常见的 Flex 布局对齐问题：当使用 justify-content: space-between 时，如何使数量不等的子元素保持预期对齐效果。
问题描述：以下代码片段使用了 Flex 布局，目标是使 .b 类元素水平对齐，但由于两个 .a 容器中子元素数量不同，导致对齐效果不佳。
代码片段：
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>Flex 布局对齐测试</title>
<style>
html, body, #container {
width: 100%;
height: 100%;
}
* {
padding: 0;
margin: 0;
}
.a {
display: flex;
width: 100%;
justify-content: space-between;
}
.b {
width: 22%;
display: flex;
align-items: center;
background-color: #ccc;
}
</style>
<div class="a">
<div class="b">111</div>
<div class="b">222</div>
<div class="b">333</div>
<div class="b">444</div>
</div>
<div style="height: 10px;"></div>
<div class="a">
<div class="b">111</div>
<div class="b">222</div>
</div>目标：使第二个 .a 容器中的 "111" 和 "222" 与第一个 .a 容器中的元素对齐，即第二个 .a 容器中的 "222" 应位于第二个位置，而不是靠右对齐。 同时，不能修改 .a 类的 justify-content: space-between; 属性。
解决方案： justify-content: space-between 使 Flex 项目平均分布，首尾项目位于容器两端。要实现目标对齐，需考虑其他方法，例如使用占位元素或调整子元素宽度。 这需要对 Flex 布局属性有深入理解。 更深入的理解和解决方案，请参考相关 Flex 布局学习资料。
以上就是Flex布局中，如何使数量不等的子元素在justify-content: space-between下保持对齐？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
435
收藏
