Есть ли более гибкий способ для выравнивания «Контакта» по правому краю, чем использовать position: absolute
?
.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c { position: absolute; right: 0; }
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
Ответы:
Ну вот. Установите
justify-content: space-between
на гибкий контейнер.источник
justify-content: flex-end
.c::after
псевдоэлемент. По моему опыту,margin-left: auto;
это путь.flex-flow: row-reverse;
Более гибкий подход заключается в использовании
auto
левого поля (элементы flex обрабатывают автоматические поля несколько иначе, чем при использовании в контексте форматирования блока).Обновленная скрипка:
источник
flex
,order
и т. Д.).margin-left: auto;
стилем.margin-left: auto;
.Если вы хотите использовать Flexbox для этого, вы должны быть в состоянии, при этом (
display: flex
на контейнере,flex: 1
по пунктам, иtext-align: right
на.c
):... или, альтернативно (даже проще), если элементы не должны встречаться, вы можете использовать
justify-content: space-between
контейнер и полностью удалитьtext-align
правила:Вот демонстрация на Codepen, чтобы вы могли быстро попробовать выше.
источник
space-between
было именно то, что я искал, спасибо!Вы также можете использовать заполнитель, чтобы заполнить оставшееся пространство.
Я обновил решение с 3 различными версиями. Это из-за обсуждения обоснованности использования дополнительного элемента-заполнителя. Если вы запускаете фрагмент кода, вы видите, что все решения делают разные вещи. Например, установка класса заполнителя для элемента b заставит этот элемент заполнить оставшееся пространство. Преимущество этого заключается в том, что нет «мертвого» пространства, на которое нельзя нажать.
источник
justify-content: space-between
- это так много, серьезно? Нет необходимости в дальнейших комментариях (но если вы хотите - добро пожаловать в чат). Ответ на этот вопрос имеет право быть здесь, потому что это решение. Но определенно не оптимальный. Idk, может быть, вы не заметили, но большинство css из других ответов - это OP, и ответы на самом деле уменьшают (немного) количество css автора. Этот ответ не имеет меньше css, чем другие (не будет работать без css ОП - jsfiddle.net/63ma3b56 ). Но у него есть еще один элемент HTML.Или вы могли бы просто использовать
justify-content: flex-end
источник
justify-content
Атрибут является атрибутом флекс-контейнера, см флекси Cheatsheet Криса Coyer в: css-tricks.com/snippets/css/a-guide-to-flexboxТак же легко, как
источник
Добавьте следующий класс CSS в вашу таблицу стилей:
Поместите пустой элемент между элементом слева и элементом, который вы хотите выровнять по правому краю:
<span class="my-spacer"></span>
источник
Если вам нужно выровнять один элемент по левому краю (например, заголовок), а затем выровнять несколько элементов по правому краю (например, 3 изображения), то вы должны сделать что-то вроде этого:
Вот как это будет выглядеть (в приведенный выше фрагмент кода был включен только соответствующий CSS)
источник
'justify-content: flex-end' работал в контейнере ценовой коробки.
источник
Я считаю, что добавление justify-content: flex-end к контейнеру flex решает проблему, в то время как justify-content: space -ween ничего не делает.
источник
Для тех, кто использует Angular и Flex-Layout, используйте следующее для контейнера flex-item:
<div fxLayout="row" fxLayoutAlign="flex-end">
Смотрите документацию fxLayoutAlign здесь и полную документацию fxLayout здесь .
источник
Пример кода на основе ответа от TetraDev
Изображения справа:
Изображения слева:
источник