初衷

总结Flex使用上的误区是很必要的，因为它有助于我们深入了解并提高对Flex布局的理解和使用。通过总结误区，我们可以避免常见的错误，提高代码的质量和可维护性，以及优化布局的效果。总结误区还可以帮助其他人在学习和使用Flex布局时避免重复犯相同的错误，提高他们的学习效率和开发效率。总结误区的内容可以作为指南和参考，为使用Flex布局的开发者提供宝贵的经验和建议

误区

设置了flex:1，则表示Flex项目的宽度（或高度）就相等

使用 flex: 1 表示所有 Flex 项目的大小都为零 ，因此，弹性容器中的所有空间均可供分配。由于所有 Flex 项目的 flex-grow 扩展因子均为 1，所以，它们可以平均增长并共享 Flex 容器空间。

这里有一个误区，大多数开发者都误认为，只要在 Flex 项目上显式设置了 flex:1  ，所有 Flex 项目的宽度（或高度）就相等。  事实并非如此，比如下面示例，由于第一个 Flex 项目的内容（如果包含英文）就要比其他 Flex 项目略宽一点，即使在所有 Flex 项目设置了 flex:1 ，也没有实现所有 Flex 项目等宽的效果：

代码如下：

解决方案：

如果要真的实现所有 Flex 项目宽度相等，除了在 Flex 项目上设置为 flex:1 之外，还需要显式设置 min-width 值为 0

可能有的童鞋疑问，设置了min-width之后，第一项的英文就显示不全了，这里可以加上word-break: break-all;

代码如下：

常见误区

1. 忽略容器的属性：有时候开发者只关注子元素的Flex属性，而忽略了容器的Flex属性。容器的display:flex和其他Flex属性会影响子元素的布局和排列方式，因此需要在容器上设置正确的Flex属性。
2. 错误使用flex属性：flex属性有两个值：flex-grow和flex-shrink。有时候开发者错误地使用flex属性来设置子元素的宽度或高度，而实际上应该使用flex-basis来设置。
3. 忽略flex-wrap属性：默认情况下，Flex容器的子元素会尽量在一行或一列上排列，而不会换行。如果需要子元素换行排列，需要在容器上设置flex-wrap: wrap属性。
4. 过度使用flex: 1： flex: 1属性将子元素的扩展比例设置为1，使它们平均分配可用空间。然而，过度使用flex: 1可能会导致子元素以相等的比例拉伸，这可能不是所期望的效果。应该根据具体需求来设置适当的Flex属性。
5. 不正确地使用align-items和justify-content：align-items和justify-content属性用于设置子元素在主轴和交叉轴上的对齐方式。有时候开发者可能混淆这两个属性的使用，导致子元素在容器中的布局出现问题。
6. 忽略order属性：order属性用于设置子元素的排序顺序。默认情况下，子元素按照它们在HTML中的顺序排列。通过设置order属性，可以改变子元素的排列顺序，从而实现自定义的布局效果。
7. 过于依赖Flex布局：Flex布局是一个强大的工具，但并不适用于所有情况。有时候，通过结合使用其他布局技术（例如Grid布局或传统的块级布局）可以更好地满足需求。

深入误区

1. 忽略Flex容器的overflow属性：在Flex容器中放置了过多的内容时，有时开发者会忽略容器的overflow属性。如果内容溢出容器边界，可能会影响整体布局。根据需求，应该通过设置overflow属性来处理溢出内容。
2. 过分依赖Flex布局的嵌套：嵌套多个Flex容器可以创建复杂的布局，但也可能导致布局变得冗长和复杂。在使用Flex布局时，应该考虑是否真正需要嵌套多个Flex容器，或者是否可以使用其他布局技术来实现相同的效果。
3. 不兼容旧版本浏览器：Flex布局在较旧的浏览器版本中的支持可能有限。如果要在支持各种浏览器的项目中使用Flex布局，请确保提供适当的回退方案或使用CSS前缀以确保兼容性。