CSS Flexbox 工作原理
Flexbox (Flexible Box Layout) 是一种一维的 CSS 布局模型，旨在提供一种更高效的方式来布局、对齐和分配容器中项目的空间，即使它们的大小未知或动态变化。
它的核心概念包含两个轴：主轴 (Main Axis) 和 交叉轴 (Cross
Axis)。flex-direction 决定主轴的方向，而 justify-content
控制主轴上的对齐，align-items 控制交叉轴上的对齐。
属性详解
justify-content
定义项目在主轴（通常是水平的）上的对齐方式。
flex-start: 起点对齐 (默认)center: 居中对齐space-between: 两端对齐space-around: 环绕对齐
align-items
定义项目在交叉轴（通常是垂直的）上的对齐方式。
stretch: 拉伸填满 (默认)center: 居中对齐flex-start: 起点对齐baseline: 基线对齐
flex-direction
决定主轴的方向（项目排列方向）。
row: 水平从左到右 (默认)column: 垂直从上到下row-reverse: 水平反向
flex-wrap
决定项目是否换行。
nowrap: 不换行 (默认)wrap: 换行
常见问题 (FAQ)
Flexbox 和 Grid 有什么区别？ ▼
Flexbox 是一维布局（处理行或列），适合组件和小规模布局。CSS Grid 是二维布局（同时处理行和列），适合整体页面框架布局。两者常结合使用。
如何让 Flex 项目垂直居中？ ▼
在父容器上设置
display: flex; 和 align-items: center; 即可。如果想完全居中（水平+垂直），再加一个
justify-content: center;。
justify-content: space-between 和 space-around 区别？ ▼
Space-between 让两端项目贴边，中间项目间距相等。Space-around 让每个项目两侧间距相等，所以首尾项目与边缘的距离是项目间距离的一半。
gap 属性兼容性如何？ ▼
如今所有现代浏览器（Chrome, Firefox, Safari, Edge）都很好地支持 Flexbox 的
gap 属性。老旧浏览器可能需要 margin
替代。
为什么 align-items 不起作用？ ▼
可能父容器没有明确的高度。如果父容器高度由子元素撑开，
align-items: center 就看不出效果（因为已经占满了）。试着给父容器定一个高度。
row-reverse 会改变 DOM 顺序吗？ ▼
不会。它只改变视觉上的排列顺序。屏幕阅读器等辅助技术通常仍按 DOM 顺序读取。
Flexbox 用于什么场景最好？ ▼
导航栏、卡片列表、垂直居中、自适应宽度的输入框组、以及任何需要一维流式布局的场景。
align-content vs align-items? ▼
align-items 控制单行中项目的对齐。align-content 控制多行（当 flex-wrap: wrap
时）之间的行距对齐。如果是单行，align-content 无效。