为什么使用 flex 布局后子标签无法正常浮动？

为何 flex 与浮动不相容？

想要在 div 中垂直居中子标签，设置 display: 'flex' 和 alignItems: 'center' 似乎是个不错的选择。然而，我们发现这样做会导致子标签无法正常浮动。这是为什么呢？

浮动和 flex 属于不同的布局机制。浮动是一种传统的布局技术，允许元素从普通文档流中“浮出”，并在周围元素旁边定位。而 flex 是一种现代布局系统，提供更直观灵活的方式来排列和对齐元素。

当我们同时使用 flex 和浮动时，会出现冲突。 flex 的伸缩容器会将它的所有直接子项排列成一条水平线（主轴），除非我们显式设置了 flex 方向。而浮动则会使元素脱离主轴，从而无法正常对齐。

因此，为了解决这个问题，我们需要选择一种布局方法：

• 使用 flex 布局：调整主轴布局以达到我们希望的效果，例如使用 justify-content: space-between 或给最后一个元素设置 margin-left: auto
• 使用绝对定位：使用 position: absolute 将元素固定在特定位置
• 放弃浮动：回到使用 flex 布局的时代

以上就是为什么使用 flex 布局后子标签无法正常浮动？的详细内容，更多请关注其它相关文章！