Поплавок прямо во flexbox

Question

Я хочу создать вертикальную панель навигации с правой стороны в React, используя flexbox, а посередине будет элемент входа в систему, к которому у меня нет доступа. Проблема в том, что используется justify-content: flex-end. Элемент смещен вправо, но элемент логина находится ниже, а не в центре.

Я пытался использовать позицию: абсолютный, наследовать. Но элементы входа будут перекрываться. Я также пытался использовать z-index, но это похоже. z-индекс -1; Хорошо для входа плохо для Navbar. z-index 10: хорошо для navbar, плохо для входа.

Обычно я бы просто использовал float: прямо на navbar и покончил с этим. Но я хотел бы знать, есть ли решение с flexbox.

Answer 1

Я не думаю, что flexbox - правильный инструмент для этого макета.Это могло бы быть, если бы форма входа в систему была центрирована относительно пространства, оставленного навигационной панелью (что могло иметь больше смысла, чем центрировано относительно всего тела).Здесь кажется, что navbar действительно float: right или position: fixed.Указанная здесь компоновка делает наложение неизбежным для экранов меньшего размера, так что да, вам нужно определить поведение, когда это произойдет.