Положение в последний раз сгибает объект в конце контейнера
Этот вопрос касается браузера полной поддержкой css3 включая flexbox.
У меня есть контейнер гибкого провода с некоторыми объектами в нем. Они все выравниваются по ширине для запущений гибкий провод, но я хочу последнее .end объект, который будет выровнен по ширине к концу гибкого провода. Существует ли хороший способ сделать это, не изменяя HTML и не обращаясь к абсолютному расположению?
.container {
display: flex;
flex-direction: column;
outline: 1px solid green;
min-height: 400px;
width: 100px;
justify-content: flex-start;
}
p {
height: 50px;
background-color: blue;
margin: 5px;
}<div class="container">
<p></p>
<p></p>
<p></p>
<p class="end"></p>
</div>2 ответа
Гибкий Модуль Расположения Поля - 8.1. При выравнивании с автоматическими полями
Автоматические поля на объектах гибкого провода имеют эффект, очень похожий на автоматические поля в потоке блока:
Во время вычислений оснований гибкого провода и гибких длин, автоматические поля рассматривают как 0.
До выравнивания через
justify-contentиalign-self, любое положительное свободное пространство распределяется автоматическим полям в том размере.
Поэтому Вы могли использовать margin-top: auto для распределения пространства между другими элементами и последним элементом. Это расположит элемент внизу.
.end {
margin-top: auto;
}
можно также избегать использования класса и использовать :last-of-type / last-child псевдо класс.
p:last-of-type {
margin-top: auto;
}
.container {
display: flex;
flex-direction: column;
outline: 1px solid green;
min-height: 400px;
width: 100px;
justify-content: flex-start;
}
p {
height: 50px;
background-color: blue;
margin: 5px;
}
.end {
margin-top: auto;
}<div class="container">
<p></p>
<p></p>
<p></p>
<p class="end"></p>
</div> Этот flexbox принцип также работает горизонтально
Во время вычислений оснований гибкого провода и гибких длин, автоматические поля рассматривают как 0.
До выравнивания через выравнивать-по-ширине-содержание и выравниваются - сам, любое положительное свободное пространство распределяется автоматическим полям в том размере.
Установка автоматического левого поля для Последнего Объекта сделает работу.
.last-item {
margin-left: auto;
}
Пример кода:
.container {
display: flex;
width: 400px;
outline: 1px solid black;
}
p {
height: 50px;
width: 50px;
margin: 5px;
background-color: blue;
}
.last-item {
margin-left: auto;
}<div class="container">
<p></p>
<p></p>
<p></p>
<p class="last-item"></p>
</div>Это может быть очень полезно для Настольных Нижних колонтитулов.
Как Envato сделал здесь с логотипом компании.