Birkaç çocukla birlikte bir div
im var:
<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>
ve aşağıdaki düzeni istiyorum:
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
|can have many |
|rows |
| |
| |
| |
|link-button |
-------------------
pnin içinde ne kadar metin olursa olsun,
.button`u akıştan çıkarmadan her zaman en alta yapıştırmak istiyorum. Bunun Flexbox ile başarılabileceğini duydum ama bir türlü başaramıyorum.
Otomatik kenar boşlukları]1 kullanabilirsiniz
justify-content
vealign-self
aracılığıyla hizalamadan önce, herhangi bir pozitif boş alan şu şekilde otomatik kenar boşluklarına dağıtılır boyut.
Yani bunlardan birini (veya her ikisini) kullanabilirsiniz:
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>
Alternatif olarak, a
dan önceki öğenin mevcut alanı dolduracak şekilde büyümesini sağlayabilirsiniz:
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>
Bir öğeyi alta konumlandırmak için display: flex kullanabilirsiniz, ancak tüm öğelerinizi etkileyeceği için bu durumda flex kullanmak isteyeceğinizi sanmıyorum.
Flex kullanarak bir öğeyi alta konumlandırmak için şunu deneyin:
.container {
display: flex;
}
.button {
align-self: flex-end;
}
En iyi seçeneğiniz düğmeye position: absolute ayarı yapmak ve bottom' olarak ayarlamaktır: 0
olarak ayarlamak ya da düğmeyi konteynerin dışına yerleştirmek ve negatif transform: translateY(-100%)
kullanarak bu şekilde konteynerin içine getirmektir:
.content {
height: 400px;
background: #000;
color: #fff;
}
.button {
transform: translateY(-100%);
display: inline-block;
}
Bunu kontrol edin [JSFiddle][1]
align-self: flex-end;` ile çözüm benim için işe yaramadı ama flex kullanmak isterseniz bu çözüm işe yaradı:
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
| |
| |
| |
|link button |
-------------------
Not:** "kod parçacığını çalıştırırken" alttaki bağlantıyı görmek için aşağı kaydırmanız gerekir._
.content {
display: flex;
justify-content: space-between;
flex-direction: column;
height: 300px;
}
.content .upper {
justify-content: normal;
}
/* Just to show container boundaries */
.content .upper, .content .bottom, .content .upper > * {
border: 1px solid #ccc;
}
<div class="content">
<div class="upper">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>paragraph text</p>
</div>
<div class="bottom">
<a href="/" class="button">link button</a>
</div>
</div>