CSS выравнивает один элемент справа с flexbox
https://jsfiddle.net/vhem8scs/
можно ли выровнять два элемента влево и один элемент вправо с помощью flexbox? Ссылка показывает это более четко. Последний пример-это то, чего я хочу достичь.
в flexbox у меня есть один блок кода. С float у меня есть четыре блока кода. Это одна из причин, почему я предпочитаю 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;
}
2 ответов
для выравнивания одного гибкого ребенка вправо установите его сmargin-left: auto;
С flex spec:
одна польза автоматических полей в главной оси отделить детали гибкого трубопровода в отдельные "группы". В следующем примере показано, как использовать это воспроизвести общий шаблон пользовательского интерфейса-один бар действий с некоторыми выровнены слева и другие выровнены справа.
.wrap div:last-child {
margin-left: auto;
}
обновление скрипка
.wrap {
display: flex;
background: #ccc;
width: 100%;
justify-content: space-between;
}
.wrap div:last-child {
margin-left: auto;
}
.result {
background: #ccc;
margin-top: 20px;
}
.result:after {
content: '';
display: table;
clear: both;
}
.result div {
float: left;
}
.result div:last-child {
float: right;
}
<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>
Примечание:
вы можете достичь аналогичного эффекта, установив flex-grow:1 на среднем элементе flex (или стенография flex:1
), который будет толкать последний элемент полностью вправо. (демо)
очевидная разница, однако, заключается в том, что средний элемент становится больше, чем это может потребоваться. Добавьте границу к элементам flex, чтобы увидеть разница.
демо
.wrap {
display: flex;
background: #ccc;
width: 100%;
justify-content: space-between;
}
.wrap div {
border: 3px solid tomato;
}
.margin div:last-child {
margin-left: auto;
}
.grow div:nth-child(2) {
flex: 1;
}
.result {
background: #ccc;
margin-top: 20px;
}
.result:after {
content: '';
display: table;
clear: both;
}
.result div {
float: left;
}
.result div:last-child {
float: right;
}
<div class="wrap margin">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<div class="wrap grow">
<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>
для краткой, чистой опции 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;
}
таким образом, вы можете сгруппировать несколько элементов справа(или только один).