Float не работает в гибком контейнере

Я хочу разместить текст (ссылка foo) справа от элемента нижнего колонтитула.

Мне нужен дисплей нижнего колонтитула, чтобы он оставался flex.

Но когда я устанавливаю его на flex, float:right для span больше не работает.

<footer style="display: flex;">
     <span style="text-align: right;float: right;">
        <a>foo link</a>
     </span>
</footer>

Ответы

Ответ 1

Свойство float игнорируется в контейнере flex.

Из спецификации flexbox:

3. Контейнеры Flex: отображение flex и inline-flexзначения

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

Например, поплавки не вторгаются в контейнер flex, а границы гибких контейнеров не сворачиваются с по содержание.

float и clear не создают плавающий или зазор гибкого элемента и не выходят из него.

Вместо этого просто используйте свойства flex:

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

<footer>
    <span>
       <a>foo link</a>
    </span>
</footer>

Ответ 2

Он работает, если вы добавите margin-left: auto;, как я здесь, в jsfiddle: https://jsfiddle.net/dhsgvxdx/3/

<body>
    <footer style="display: flex;">
        <span style="text-align: right;float: right; margin-left: auto;">
            <a>foo link</a>
        </span>
    </footer>
</body>

Ответ 3

Если этот нижний колонтитул содержит только выровненный по правому краю элемент, вы можете просто применить justify-content: flex-end к контейнеру flex. Таким образом, вам не нужно добавлять какие-либо стили к своим дочерним элементам.

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

Пример Codepen