flex-direction: row/column 示例HTML:CSS:用法flex-direction: row: 子元素水平排列（默认值）flex-direction: column: 子元素垂直排列可配合 flex-wrap, justify-content, align-items 使用安装不需要安装，是CSS原生属性，直接在现代浏览器中使用。
display: flex/inline-flex 示例、用法、安装1. 示例Flex 示例:Inline-Flex 示例:2. 用法Flex：块级弹性容器，独占一行。Inline-Flex：行内弹性容器，与其他行内元素共处一行。常用属性：justify-content：主轴对齐方式（如 flex-start, center, space-between）。align-items：交叉轴对齐方式（
display: flex/inline-flex 示例、用法、安装1. 示例2. 用法flex: 块级弹性容器，独占一行inline-flex: 行内弹性容器，与其他元素共享一行常用属性：3. 安装不需要安装，Flexbox 是 CSS3 原生支持的功能，现代浏览器均内置支持。只需在 CSS 中直接使用即可。浏览器支持：所有现代浏览器（Chrome、Firefox、Safari、Edge）IE1
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（交
如何优化Flexbox布局的性能？1. 避免过度嵌套问题：过多的嵌套会增加布局计算复杂度，影响渲染性能。优化方法：减少不必要的Flexbox容器层级，尽量扁平化结构。示例：❌ 不推荐（嵌套过多）：✅ 推荐（简化结构）：2. 使用 flex 简写属性问题：单独设置 flex-grow、flex-shrink、flex-basis 会增加样式计算时间。优化方法：使用 flex 简写，减少CSS解析时间
