CSS Flex布局中如何实现导航栏与Logo的左右分布_利用justify-content- space-between

justify-content: space-between 未生效的主因是父容器未设为 Flex 容器或子元素层级不平级；需确保 display: flex 生效、Logo 与导航为同级子元素，且响应式时配合 flex-direction 调整对齐轴。justify-content: space-between 为什么没生效常见现象是写了 justify-content: space-between，但 Logo 和导航项还是挤在左边，甚至完全没反应。根本原因通常是父容器没设成 Flex 容器，或者子元素被包裹在多余层级里（比如导航项套了 <div> 或 <nav> 但没设 display: flex）。实操建议：确认父容器（比如 <header>）必须有 display: flex，且没被其他样式覆盖（检查 computed styles）确保 Logo 和导航栏是同一级子元素------不能是 <header> > <div> > <img> + <header> > <nav> > <ul>，得是 <header> > <img> 和 <header> > <nav>如果用了语义化标签如 <nav>，它默认是 block，不影响；但别给它加 display: inline-block 这类干扰布局的样式Logo 左对齐、导航右对齐的最小可行结构这不是靠 magic，而是靠两个直接子元素占满主轴两端。只要结构干净，space-between 就能立刻起效。示例 HTML：立即学习"前端免费学习笔记（深入）"；<header style="display: flex; justify-content: space-between; align-items: center;"> <img src="logo.svg" alt="Logo"> <nav> <ul style="display: flex; gap: 1rem; margin: 0; padding: 0;"> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li> </ul> </nav></header>关键点： MacsMind 电商AI超级智能客服