基本概念Flex布局（弹性盒子布局）是一种CSS3布局模式，用于创建灵活的响应式布局结构。核心属性容器属性display: flex; - 定义Flex容器flex-direction: - 主轴方向row (默认)row-reversecolumncolumn-reverseflex-wrap: - 换行方式nowrap (默认)wrapwrap-reversejustify-content:

基本概念Flex布局（弹性盒子）是一种CSS布局模式，用于在容器内分配空间和对齐项目。导航栏实现步骤HTML结构CSS样式关键属性说明容器属性：display: flex：定义flex容器flex-direction：主轴方向（row/column）justify-content：主轴对齐方式align-items：交叉轴对齐方式项目属性：flex-grow：放大比例flex-shrink：缩小比

display: flex/inline-flex 示例、用法、安装1. 示例Flex 示例:Inline-Flex 示例:2. 用法Flex：块级弹性容器，独占一行。Inline-Flex：行内弹性容器，与其他行内元素共处一行。常用属性：justify-content：主轴对齐方式（如 flex-start, center, space-between）。align-items：交叉轴对齐方式（

Flexbox基础属性1. display: flex作用：将容器设为Flex布局。示例：2. flex-direction作用：定义主轴方向。取值：row（默认）：水平排列（左到右）。row-reverse：水平排列（右到左）。column：垂直排列（上到下）。column-reverse：垂直排列（下到上）。示例：3. flex-wrap作用：控制子项是否换行。取值：nowrap（默认）：不换

Flexbox布局常见误区混淆主轴和交叉轴方向误区：认为flex-direction只改变主轴方向正确：同时影响交叉轴方向（主轴为column时，交叉轴变为水平方向）错误理解flex-grow误区：认为flex-grow按比例分配所有空间正确：只分配剩余空间（基础尺寸由flex-basis或内容决定后）默认对齐方式误解误区：项目默认在容器中居中正确：默认align-items: stretch（交