display: flex ;相关内容记录

justify-content: space-between; 是 CSS Flexbox 布局中用于在容器主轴方向上均匀分布子元素的属性值，其核心特性如下：

首尾贴边

第一个子元素紧贴容器起始端，最后一个子元素紧贴容器结束端。 ‌12

中间等距

剩余的子元素在容器中平均分配间距，间距自动计算。 ‌12

适用场景

• ‌导航栏布局‌：左侧Logo + 右侧用户菜单（中间无内容时自动拉开距离）。
• ‌卡片布局‌：多列卡片两端对齐且间距相等。 ‌12
• ‌响应式布局‌：屏幕宽度变化时，元素间距自动调整。 ‌1

注意事项

• 仅当容器宽度 > 子元素总宽度时生效（有空余空间可分配）。
• 主轴方向由 flex-direction 决定（默认横向排列）。 ‌1
• 子元素间距计算公式：剩余空间 = 容器宽度 - 所有子元素宽度总和；间距 = 剩余空间 / (子元素数量 - 1)。 ‌1

对比其他值

• ‌flex-start‌：所有元素靠左/上（默认）。
• ‌flex-end‌：所有元素靠右/下。
• ‌center‌：所有元素居中。
• ‌space-around‌：每个元素两侧间距相等（含首尾）。
• ‌space-evenly‌：所有间距完全相等（含首尾间隙）。