Ho un div
con alcuni bambini:
<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>
e voglio il seguente layout:
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
|can have many |
|rows |
| |
| |
| |
|link-button |
-------------------
Indipendentemente da quanto testo ci sia nella p
voglio attaccare il .button
sempre in basso senza toglierlo dal flusso. Ho sentito che questo può essere ottenuto con Flexbox, ma non riesco a farlo funzionare.
Puoi usare margini automatici
prima dell'allineamento tramite justify-content
e align-self
,
ogni spazio libero positivo viene distribuito ai margini automatici in quella
dimensione.
Quindi puoi usare uno di questi (o entrambi):
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>
In alternativa, puoi far crescere l'elemento prima della a
per riempire lo spazio disponibile:
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>
Puoi usare display: flex per posizionare un elemento in basso, ma non credo che tu voglia usare flex in questo caso, poiché influenzerà tutti i tuoi elementi.
Per posizionare un elemento in basso usando flex prova questo:
.container {
display: flex;
}
.button {
align-self: flex-end;
}
La cosa migliore è impostare position: absolute al pulsante e impostarlo a bottom: 0
, oppure potete posizionare il pulsante fuori dal contenitore e usare il negativo transform: translateY(-100%)
per portarlo nel contenitore in questo modo:
.content {
height: 400px;
background: #000;
color: #fff;
}
.button {
transform: translateY(-100%);
display: inline-block;
}
Controlla questo [JSFiddle][1]
La soluzione con align-self: flex-end;
non ha funzionato per me, ma questa ha funzionato nel caso in cui tu voglia usare flex:
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
| |
| |
| |
|link button |
-------------------
Nota: Quando "esegui il codice snippet" devi scorrere in basso per vedere il link in basso.
.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>