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;
}
Ответы:
Чтобы выровнять одного гибкого ребенка вправо, установите его
margin-left: auto;
Из спецификации Flex :
Обновленная скрипка
Показать фрагмент кода
Примечание:
Вы можете добиться аналогичного эффекта, установив flex-grow: 1 на средний элемент Flex (или сокращение
flex:1
), который будет толкать последний элемент полностью вправо. ( Демо )Однако очевидное различие заключается в том, что средний элемент становится больше, чем может потребоваться. Добавьте границу к гибким элементам, чтобы увидеть разницу.
демонстрация
Показать фрагмент кода
источник
auto
поле использует пустое пространство в контейнере для разделения гибких элементов. Свойствоflex-grow
/flex
занимает это пустое место, передает его элементу flex, который увеличивается на эту величину. Как упомянул Danield, последний метод делает flex-элемент TWO больше, чего вы можете не захотеть.div:nth-last-child(4) { margin-left: auto }
codepen.io/danield770/pen/ERyoarДля краткого, чистого параметра flexbox сгруппируйте элементы, выровненные по левому краю и элементы, выровненные по правому краю:
и использовать
space-between
:Таким образом, вы можете сгруппировать несколько элементов справа (или только один).
https://jsfiddle.net/c9mkewwv/3/
источник
display: inline;
илиdisplay: inline-block;
, то они будут сложены вместо всех подряд, как flexbox, в противном случае они будут.One
иTwo
отdiv
с доspan
й - если бы они были ещеdisplay: block;
тогда они будут поступать в отдельные строки. Поскольку у ОП изначально былиdiv
s, я просто хотел отметить, что простое размещение их внутри другогоdiv
не будет работать без изменения отображения оригинальных тегов.display: flex
больше не влияет на их расположение. Если вы хотите использовать div, да,inline
илиinline-block
будет работать. Но также, очевидно,flex
так как мы используем его по умолчаниюflex-direction: row
с родительским div уже. ех. jsfiddle.net/ynbb5964/2Выровнять некоторые элементы (headerElement) по центру и последний элемент справа (headerEnd).
источник