在 flexbox 中向右浮动

Question

我想在 React 中使用 flexbox 在右侧创建垂直导航栏，中间是我无权访问的登录元素。问题是使用 justify-content: flex-end。元素移至右侧，但登录元素位于下方而不是中心。

我试过使用position: absolute, inherit。但是登录元素会重叠。我也尝试过使用 z-index，但它是相似的。 z-index -1;对登录有利，对导航栏不利。 z-index 10：对导航栏有利，对登录不利。

通常我只会在导航栏上使用 float: right 并完成它。但是我想知道有没有flexbox的解决方案。

Answer 1

我认为 flexbox 不是适合这种布局的工具。如果登录表单相对于导航栏留下的 space 居中（这可能比相对于整个 body 居中更有意义）。这里的导航栏似乎确实是 float: right 或 position: fixed。此处指定的布局使得较小屏幕尺寸的重叠不可避免，所以是的，您需要定义发生这种情况时的行为。