参考资料

1. css div居中对齐方式
2. flex-wrap: wrap/nowrap详细说明
3. css div居中代码
4. css如何居中一个div
5. css3中设置阴影的属性是
6. 如何用添加产品图片和描述？
7. 属性选择器详细说明以及案例
8. 如何添加按钮的过渡动画效果？

Flex布局如何优化页面加载速度？

1. 减少嵌套层级

• 示例：避免多层flex容器嵌套

<!-- 优化前 -->
<div style="display:flex">
  <div style="display:flex">
    <div>内容</div>
  </div>
</div>

<!-- 优化后 -->
<div style="display:flex">
  <div>内容</div>
</div>

2. 使用flex-wrap合理换行

• 示例：移动端适配时自动换行

.container {
  display: flex;
  flex-wrap: wrap;
}

3. 合理使用flex-grow

• 示例：分配剩余空间

.item {
  flex-grow: 1; /* 平均分配空间 */
}
.main {
  flex-grow: 2; /* 主区域占2份 */
}

4. 避免不必要的重排

• 示例：固定尺寸项目

.item {
  flex: 0 0 200px; /* 不伸缩，固定200px */
}

5. 使用order属性优化DOM顺序

• 示例：移动端优先显示重要内容

.important {
  order: -1; /* 移到最前面 */
}

6. 利用align-self减少额外容器

• 示例：单独对齐某个项目

.special-item {
  align-self: center; /* 单独垂直居中 */
}

7. 预定义flex-basis

• 示例：避免布局抖动

.item {
  flex: 1 1 300px; /* 基准300px */
}

8. 使用gap属性替代margin

• 示例：统一间距控制

.container {
  display: flex;
  gap: 10px; /* 项目间距10px */
}