Как прижать flex-контейнер к правой стороне?
Доброго времени суток! Вот есть такое меню:
Все пункты меню это li в ul, то есть списком. Вот CSS:
Каждый li тоже flex-контейнер получается (если я правильно понимаю). Мне нужно сделать для двух последних так сказать float: right. Но я что то не могу понять как это сделать. ul у меня на всю ширину растянут, то есть куда их двигать места хватает. Пробовал разные justify и align но чего то не получается 🙁
Подскажите как правильно это реализовать. Заранее спасибо!
Выравнивание флекс элементов по главной оси
Свойство justify-content позволяет выравнивать элементы по главной оси. Ранее вы уже проходили значения center , space-between , space-around , space-evenly . Давайте теперь изучим еще несколько значений.
Значение flex-start прижимает элементы к началу главной оси, а значение flex-end — к концу. Давайте посмотрим на примерах.
Пример
Направим главную ось слева направо, задав свойству flex-direction значение row . Прижмем блоки к началу оси. Для этого justify-content установим в значение flex-start :
Результат выполнения кода:
Пример
Давайте теперь прижмем блоки к концу оси. Для этого justify-content установим в значение flex-end :
Результат выполнения кода:
Пример
Направим теперь главную ось справа налево, задав свойству flex-direction значение row-reverse . Прижмем блоки к началу оси, то есть к правому краю. Для этого justify-content установим в значение flex-start :
Результат выполнения кода:
Пример
А теперь давайте прижмем блоки к концу главной оси, то есть к левому краю. Для этого justify-content установим в значение flex-end :
Результат выполнения кода:
Пример
В предыдущих примерах главная ось была направлена горизонтально. Давайте теперь перевернем ее и направим вертикально.
Давайте направим главную ось вниз, задав свойству flex-direction значение column .
Прижмем блоки к началу главной оси, то есть к верхнему краю. Для этого justify-content установим в значение flex-start :
Результат выполнения кода:
Пример
Давайте теперь прижмем блоки к концу главной оси, то есть к нижнему краю. Для этого justify-content установим в значение flex-end :
Результат выполнения кода:
Пример
Перевернем главную ось, направив ее снизу вверх. Для этого свойству flex-direction зададим значение column-reverse . В этом случае блоки поменяют свой порядок — в начале оси будет стоять последний в HTML коде блок.
Давайте прижмем блоки к началу главной оси, то есть к нижнему краю. Для этого justify-content установим в значение flex-start :
Результат выполнения кода:
Пример
Давайте прижмем блоки к концу главной оси, то есть к верхнему краю. Для этого justify-content установим в значение flex-end :
justify-content
CSS свойство justify-content определяет, как браузер распределяет пространство между и вокруг элементов контента вдоль главной оси flex контейнера, или вдоль строчной оси grid контейнера.
Интерактивный пример ниже демонстрирует некоторые значения, используя Grid размещение.
Интерактивный пример
Выравнивание выполняется после того, как применяются длины и автоматические поля, что означает, что если во Flexbox разметке есть хотя бы один flex-элемент, с flex-grow отличным от 0 , эффект не будет применён, потому что не останется свободного места.
Синтаксис
Значения
Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси.
Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси.
Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси, в зависимости от её направления (flex-direction). Для элементов, которые не являются дочерними элементами flex контейнера, это значение обрабатывается как start .
Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси, в зависимости от её направления (flex-direction). Для элементов, которые не являются дочерними элементами flex контейнера, это значение обрабатывается как end .
Элементы располагаются друг за другом в центре контейнера по главной оси.
Элементы располагаются друг за другом и прижимаются к левому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как start .
Элементы располагаются друг за другом и прижимаются к правому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как start .
Элементы располагаются на своих обычных позициях, так как будто свойство justify-content не задано. Этот параметр ведёт себя как stretch в grid и flex контейнерах.
baseline first baseline last baseline
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fallback alignment for first baseline is start , the one for last baseline is end .
Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны. Первый элемент прижат к началу контейнера по главной оси, а последний — к концу.
Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны. Пустые пространства перед первым элементом и после последнего элемента равны половине расстояния между парами соседних элементов.
Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны расстояниям от начала контейнера до первого элемента и от последнего элемента до конца контейнера.
If the combined size of the items is less than the size of the alignment container, any auto -sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height / max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.
Примечание: stretch не поддерживается гибкими контейнерами (flexbox).
If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start .
Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.
Выравнивание элементов. justify-content¶
Иногда мы можем сталкиваться с тем, что пространство flex-контейнеров по размеру отличается от пространства, необходимого для flex-элементов. Например:
- flex-элементы не используют все пространство flex-контейнера
- flex-элементам требуется большее пространство, чем доступно во flex-контейнере. В этом случае элементы выходят за пределы контейнера.
Для управления этими ситуациями мы можем применять свойство justify-content. Оно выравнивает элементы вдоль основной оси — main axis (при расположении в виде строки по горизонтали, при расположении в виде столбца — по вертикали) и принимает следующие значения: