Раздельная навигация

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

Навигационный паттерн, в котором один или более элементов отделены от остальных элементов навигации.

Items separated into two groups.

Требования

Распространённый навигационный шаблон имеет один элемент, который отделен от остальных. Мы можем использовать Flexbox для того, чтобы сделать это, без необходимости создавать два набора элементов в двух раздельных flex контейнерах.

Рецепт

Примечание: Download this example

Choices made

Этот паттерн объединяет margin со значением auto и Flexbox для разделения элементов.

Auto margin поглощает все доступное пространство в указанном направлении. Так же работает центрирование блока с автоматическими margin - вы имеете отступы на каждой стороне блока, пытающиеся занять все доступное пространство, таким образом толкая блок в центр.

В этом случаи левый auto margin занимает любое доступное пространство и толкает элемент к правому краю. Вы могли применить класс push к любому элементу в списке.

Совместимость с браузерами

BCD tables only load in the browser

The various layout methods have different browser support. See the charts below for details on basic support for the properties used.

Flexbox

Смотрите также