使用 Flex 布局配合 justify-content: space-between 时，若子元素未设置宽度，浏览器无法自动均分空间；需为 .left、.center、.right 显式设置等宽（如 width: 100%），再结合嵌套 flex 控制内部对齐，才能实现三栏等距、响应式拉伸的布局效果。
使用 flex 布局配合 `justify-content: space-between` 时，若子元素未设置宽度，浏览器无法自动均分空间；需为 `.left`、`.center`、`.right` 显式设置等宽（如 `width: 100%`），再结合嵌套 flex 控制内部对齐，才能实现三栏等距、响应式拉伸的布局效果。
要让 footer 中的三个区块（.left、.center、.right）真正均匀拉伸并等宽分布（而非仅靠 space-between 留白撑开），关键在于：justify-content: space-between 仅控制主轴上已有元素之间的间距，它不会强制子容器等宽——前提是这些子容器本身没有明确尺寸或弹性行为。
✅ 正确做法是：
为三个直接子容器统一设置 flex: 1（推荐）或 width: 33.333%，同时确保父容器启用 display: flex 并移除可能干扰的默认行为（如 inline 元素间隙、未重置的 margin/padding）。
以下是优化后的 CSS 方案（更健壮、可维护性更强）：
.wrapper-80 {
display: flex;
justify-content: space-between; /* 可保留，但非必需 */
gap: 2rem; /* 推荐替代 margin，语义清晰且自动避让 */
}
/* 三栏等宽弹性分配（响应式友好） */
.left, .center, .right {
flex: 1; /* 等效于 flex: 1 1 0 —— 占据剩余空间，无基础宽度 */
min-width: 0; /* 防止内容溢出破坏布局（尤其含长文本/URL时） */
}⚠️ 注意事项：
- 原答案中
width: 100%在 flex 容器内会导致三列各自占满整行（总宽度超 300%），实际会换行或溢出——这是常见误区。正确方式是使用flex: 1实现弹性均分。 -
<ul></ul>内直接写<a></a>是 HTML5 无效结构（<ul></ul>只允许<li>作为直接子元素）。请修正为：<ul> <li><a href="#">Информирај се</a></li> <li><a href="#">Дискусии</a></li> <!-- 其他项同理 --> </ul>
- 若需
.center和.right内部链接水平居中或右对齐，可在其内部追加：.center ul { display: flex; flex-direction: column; gap: 0.5rem; } .right ul { display: flex; flex-direction: column; align-items: flex-end; }
? 总结：
均分布局 ≠ 仅靠 space-between；核心是让子容器具备弹性生长能力（flex: 1）+ 合理 HTML 结构 + 语义化间距控制（gap 优于 margin）。这样既贴合设计图效果，又具备跨设备适配能力。
