CSS выровнять один элемент вправо с помощью flexbox

212

https://jsfiddle.net/vhem8scs/

Можно ли сделать так, чтобы два элемента были выровнены по левому краю, а один - по флексбоксу? Ссылка показывает это более четко. Последний пример - это то, чего я хочу достичь.

Во flexbox у меня есть один блок кода. С плавающей точкой у меня есть четыре блока кода. Это одна из причин, почему я предпочитаю flexbox.

HTML

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->

<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

CSS

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}

.result {
  background: #ccc;
  margin-top: 20px;
}

.result:after {
  content: '';
  display: table;
  clear: both;
}

.result div {
  float: left;
}
.result div:last-child {
  float: right;
}
Йенс Торнелл
источник
3
stackoverflow.com/a/33856609/3597276
Майкл Бенджамин

Ответы:

525

Чтобы выровнять одного гибкого ребенка вправо, установите егоmargin-left: auto;

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

Одно из применений автоматических полей на главной оси - разделение гибких элементов на отдельные «группы». В следующем примере показано, как использовать это для воспроизведения общего шаблона пользовательского интерфейса - одной панели действий, некоторые из которых выровнены по левому краю, а другие по правому краю.

.wrap div:last-child {
  margin-left: auto;
}

Обновленная скрипка

Примечание:

Вы можете добиться аналогичного эффекта, установив flex-grow: 1 на средний элемент Flex (или сокращение flex:1), который будет толкать последний элемент полностью вправо. ( Демо )

Однако очевидное различие заключается в том, что средний элемент становится больше, чем может потребоваться. Добавьте границу к гибким элементам, чтобы увидеть разницу.

демонстрация

Danield
источник
Спасибо! Я попробовал другую вещь, которая сработала, прежде чем я прочитал это. Это должно было установить flex-grow: 1 на элемент, который должен толкать другой. Это сработало также. Вы знаете, какие из них лучше и почему?
Йенс Торнелл
2
Отличный ответ. Таким образом, поле не занимает дополнительного места, а flex: 1 делает. Прохладно!
Йенс Торнелл
4
@ JensTörnell, autoполе использует пустое пространство в контейнере для разделения гибких элементов. Свойство flex-grow/ flexзанимает это пустое место, передает его элементу flex, который увеличивается на эту величину. Как упомянул Danield, последний метод делает flex-элемент TWO больше, чего вы можете не захотеть.
Майкл Бенджамин
12
Не все герои носят плащи.
Том
2
@ user1063287, чтобы выровнять несколько элементов вправо, просто примените margin-left: auto к первому элементу, который необходимо выровнять по правому краю. Допустим, вы хотите, чтобы последние 4 элемента были выровнены по правому краю, вы должны сделать это: div:nth-last-child(4) { margin-left: auto } codepen.io/danield770/pen/ERyoar
Danield
37

Для краткого, чистого параметра flexbox сгруппируйте элементы, выровненные по левому краю и элементы, выровненные по правому краю:

<div class="wrap">
  <div>
    <span>One</span>
    <span>Two</span>
  </div>
  <div>Three</div>
</div>

и использовать space-between:

.wrap {
  display: flex;
  background: #ccc;
  justify-content: space-between;
}

Таким образом, вы можете сгруппировать несколько элементов справа (или только один).

https://jsfiddle.net/c9mkewwv/3/

spflow
источник
Это работает, но если вы не измените элементы в каждой группе на display: inline;или display: inline-block;, то они будут сложены вместо всех подряд, как flexbox, в противном случае они будут.
Жнец DIMM
@TheDIMMReaper Я не уверен, что вижу проблему. Не могли бы вы расширить?
spflow
Я просто имею в виду , как вы изменили тег сразу оборачивать Oneи Twoот divс до spanй - если бы они были еще display: block;тогда они будут поступать в отдельные строки. Поскольку у ОП изначально были divs, я просто хотел отметить, что простое размещение их внутри другого divне будет работать без изменения отображения оригинальных тегов.
Жнец DIMM
1
Да, поскольку элементы теперь находятся на одном уровне, display: flexбольше не влияет на их расположение. Если вы хотите использовать div, да, inlineили inline-blockбудет работать. Но также, очевидно, flexтак как мы используем его по умолчанию flex-direction: rowс родительским div уже. ех. jsfiddle.net/ynbb5964/2
spflow
Спасибо, я попробовал align-self: flex-end, но почему это не работает?
Ананд
3

Выровнять некоторые элементы (headerElement) по центру и последний элемент справа (headerEnd).

.headerElement {
    margin-right: 5%;
    margin-left: 5%;
}
.headerEnd{
    margin-left: auto;
}
Сатвик Ватс
источник