Выровнять элемент снизу с помощью flexbox
у меня есть div
С некоторыми детьми:
<div class="content">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some more or less text</p>
<a href="/" class="button">Click me</a>
</div>
и я хочу следующую структуру:
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
|can have many |
|rows |
| |
| |
| |
|link-button |
-------------------
независимо от того, сколько текст в p
Я хочу вставить .button
всегда внизу, не вынимая его из потока. Я слышал, что это может быть достижимо с Flexbox, но я не могу заставить его работать.
4 ответов
можно использовать автополя
до выравнивания с помощью
justify-content
иalign-self
, любое положительное свободное пространство распределяется на автоматические поля в этом измерение.
так что вы можете использовать один из них (или оба):
p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */
.content {
height: 200px;
border: 1px solid;
display: flex;
flex-direction: column;
}
h1, h2 {
margin: 0;
}
a {
margin-top: auto;
}
<div class="content">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some text more or less</p>
<a href="/" class="button">Click me</a>
</div>
кроме того, вы можете сделать элемент перед a
расти, чтобы заполнить доступное пространство:
p { flex-grow: 1; } /* Grow to fill available space */
.content {
height: 200px;
border: 1px solid;
display: flex;
flex-direction: column;
}
h1, h2 {
margin: 0;
}
p {
flex-grow: 1;
}
<div class="content">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some text more or less</p>
<a href="/" class="button">Click me</a>
</div>
вы можете использовать display: flex для размещения элемента внизу, но я не думаю, что вы хотите использовать flex в этом случае, так как это повлияет на все ваши элементы. Чтобы расположить элемент внизу с помощью flex, попробуйте следующее:
.container {
display: flex;
}
.button {
align-self: flex-end;
}
ваш лучший выбор-установить позицию: абсолют к кнопке и установить ее в нижней части: 0, или вы можете поместить кнопку вне контейнера и использовать отрицательный transormY(-100%), чтобы принести его в контейнер, как это:
.content {
height: 400px;
background: #000;
color: #fff;
}
.button {
transform: translateY(-100%);
display: inline-block;
}
проверить это скрипка
раствор align-self: flex-end;
не работал для меня, но этот сделал, если вы хотите использовать flex:
в CSS
.content{
display: flex;
justify-content: space-between;
flex-direction: column;
}
HTML-код
<div class="content">
<div>
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some more or less text</p>
</div>
<div>
<a href="/" class="button">Click me</a>
</div>
</div>
результаты:
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
|can have many |
|rows |
| |
| |
| |
|link-button |
-------------------
в вашем случае использования, просто это сделает работу
.content {
display: flex;
flex-direction: column;
}
p {
flex-grow: 1;
}
Вы можете сделать что-то вроде этого, если вы хотите джойстик кнопка в нижней части экрана
.content{
display: flex;
flex-direction: column;
}
.content a{
position: fixed;
bottom: 0;
}