Flex布局中，如何使数量不等的子元素在justify-content: space-between下保持对齐？

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>

登录后复制