Этот вопрос касается браузера с полной поддержкой 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>
auto
Иллюстрации на полях здесь: stackoverflow.com/a/33856609/3597276Ответы:
Поэтому вы можете использовать
margin-top: auto
для распределения пространства между другими элементами и последним элементом.Это разместит последний элемент внизу.
p:last-of-type { margin-top: auto; }
Показать фрагмент кода
.container { display: flex; flex-direction: column; border: 1px solid #000; min-height: 200px; width: 100px; } p { height: 30px; background-color: blue; margin: 5px; } p:last-of-type { margin-top: auto; }
<div class="container"> <p></p> <p></p> <p></p> </div>
Точно так же вы можете использовать
margin-left: auto
илиmargin-right: auto
для того же выравнивания по горизонтали.p:last-of-type { margin-left: auto; }
Показать фрагмент кода
.container { display: flex; width: 100%; border: 1px solid #000; } p { height: 50px; width: 50px; background-color: blue; margin: 5px; } p:last-of-type { margin-left: auto; }
<div class="container"> <p></p> <p></p> <p></p> <p></p> </div>
источник
margin: 0 auto
для горизонтального центрирования. Элементы Flexbox соблюдают поля, и я считаю, что этоmargin: auto
позволит позиционировать элемент с максимально возможным расстоянием между соседними элементами . См .: w3.org/TR/css-flexbox-1/#auto-marginsmargin: auto
на гибком элементе указывает ему создать как можно больше места в этом направлении.Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
Этот принцип flexbox также работает по горизонтали
Во время расчетов гибких оснований и гибких длин автоматические поля обрабатываются как 0.
Перед выравниванием с помощью justify-content и align-self любое положительное свободное пространство распределяется по автоматическим полям в этом измерении.
Установка автоматического левого поля для последнего элемента сделает всю работу.
.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>
Codepen Snippet
Это может быть очень полезно для нижних колонтитулов рабочего стола.
Как Envato сделал здесь с логотипом компании.
Codepen Snippet
источник