开发中遇见的问题

Flex 布局中内容被挤压的问题

问题描述：在 Flex 布局中，子元素可能会因为空间不足而被自动压缩。

解决方法：

.child-element {
  flex-shrink: 0; /* 防止元素被挤压 */
}

子元素被选中时修改父元素样式

问题描述：需要根据子元素的状态（如获得焦点）来改变父元素的样式。

解决方法：

.parent-element:focus-within {
  /* 当子元素获得焦点时应用的父元素样式 */
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

使用场景：适用于表单输入、导航菜单等需要根据子元素状态高亮显示父容器的场景。

forEach 中使用 async 问题

问题描述：在开发中使用 forEach 遍历数组时，使用 async 调用异步函数，发现异步函数还没有执行完成，就继续向下执行了。

原因分析：forEach 循环是同步的，不会等待异步函数执行完成。

解决方法：

• 使用 for of 替换 forEach
• 使用 reduce 替换 forEach