Позиционирование текста по правому краю в нижнем колонтитуле Flex с использованием свойств Flex.

При попытке выровнять текст по правому краю в гибком контейнере с помощью свойства float , вы можете столкнуться с проблемами. Это связано с тем, что свойство float не поддерживается в гибких контейнерах.

Согласно спецификации flexbox, «float иclear не создают плавающее или освобождение гибкого элемента и не выводят его из потока. " Вместо этого он устанавливает новый «контекст гибкого форматирования» для своего содержимого, что означает, что плавающие элементы игнорируются, а поля не схлопываются вместе с содержимым контейнера.

Чтобы расположить текст вправо в нижнем колонтитуле, настроенном на гибкое отображение, вместо этого используйте гибкие свойства. Свойство justify-content можно использовать для горизонтального выравнивания элементов внутри контейнера. Например, в предоставленном фрагменте кода:

footer {
    display: flex;
    justify-content: flex-end;
}

Этот код выровняет по правому краю диапазон, содержащий текст «foo link» внутри элемента нижнего колонтитула.