Flex容器默认按主轴方向排列子元素，由flex-direction决定，默认row；2. justify-content、align-items和gap控制间距，可实现居中等布局；3. position: relative不脱离Flex流，可通过偏移调整位置，保留原有空间；4. position: absolute使元素脱离布局流，不参与排列，相对定位祖先定位，不影响其他项；5. 微调用margin或transform，覆盖需求用absolute并确保父级定位。
在 Flex 容器中，CSS 定位元素的排列方式与普通布局略有不同，理解它们之间的关系有助于更精准地控制布局效果。
Flex 容器中的正常流排列
默认情况下，Flex 容器会按照主轴（main axis）方向排列子元素。这个方向由 flex-direction 决定，默认是 row（从左到右）。Flex 项会自动沿主轴排列，间距可通过 justify-content、align-items 和 gap 控制。
例如：
display: flex;justify-content: center;
align-items: center;
会让子元素在容器中水平居中、垂直居中。
立即学习“前端免费学习笔记（深入）”；
使用 position: relative 的影响
给 Flex 项设置 position: relative 不会影响它在 Flex 主轴上的排列位置，但允许你通过 top、bottom、left、right 偏移元素，而不会脱离 Flex 流。
偏移后，元素视觉位置改变，但原本占据的空间保留，不影响其他 Flex 项的排列。
使用 position: absolute 脱离布局流
当一个 Flex 项设置为 position: absolute 时，它将：
- 脱离正常的 Flex 布局流
- 不再参与主轴或交叉轴的排列
- 相对于最近的定位祖先元素（如 position: relative 的父容器）进行定位
- 可能覆盖其他内容
此时，该元素不会占用 Flex 容器的空间，其他 Flex 项会像它不存在一样排列。
常见使用场景建议
如果你希望某个元素仍参与 Flex 排列，仅做微调：
- 使用 margin 或 transform
- 或用 position: relative 配合偏移
如果需要将元素脱离布局，比如做图层覆盖、弹窗、角标：
- 使用 position: absolute
- 确保父容器设置了 position: relative
基本上就这些。Flex 布局本身已经很强大，结合定位属性时注意是否要脱离文档流，就能避免布局错乱。
