Flexbox基础属性1. display: flex作用：将容器设为Flex布局。示例：2. flex-direction作用：定义主轴方向。取值：row（默认）：水平排列（左到右）。row-reverse：水平排列（右到左）。column：垂直排列（上到下）。column-reverse：垂直排列（下到上）。示例：3. flex-wrap作用：控制子项是否换行。取值：nowrap（默认）：不换
如何优化Flexbox布局的性能？1. 避免过度嵌套问题：过多的嵌套会增加布局计算复杂度，影响渲染性能。优化方法：减少不必要的Flexbox容器层级，尽量扁平化结构。示例：❌ 不推荐（嵌套过多）：✅ 推荐（简化结构）：2. 使用 flex 简写属性问题：单独设置 flex-grow、flex-shrink、flex-basis 会增加样式计算时间。优化方法：使用 flex 简写，减少CSS解析时间
水平居中方法1: margin auto方法2: flexbox垂直居中方法1: flexbox方法2: transform水平垂直居中方法1: flexbox方法2: absolute + transform完整示例:
