Flexbox: allineare tra il fondo e il centro?

Question

Qualcuno sa come creare questo layout, usando flexbox?

Il testo sta per essere posto al centro, e il pulsante sta per essere collocato tra il testo e inferiore.

ho questo ora:

.aligner { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    height: 100%; 
 
}

<div class="aligner"> 
 
    <h3>SUPERMAN</h3> 
 
    <p>FTW</p> 
 
    <button>BUTTON</button> 
 
</div>

Questo allinea tutto in pieno centro, ma voglio solo il testo per essere nel centro, e il pulsante tra il centro e la parte inferiore.

Answer 1

Si può provare questo layout:

• elemento anonimo con flex: 1
• titolo e sottotitolo (titoli)
• Elemento con flex: 1 e display: flex.

Gli elementi sopra e sotto il titolo occuperanno spazio disponibile per titoli in quantità uguali. Quindi i titoli saranno centrati.

Questi elementi possono anche essere contenitori flessibili e è possibile allineare il loro contenuto all'interno di essi come desiderato.

html, body {height: 100% } * { margin: 0; } 
 
.aligner, .below { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 
.aligner { 
 
    height: 100%; 
 
} 
 
.aligner::before { content: ''; } 
 
.aligner::before, .below { 
 
    flex: 1; 
 
}

<div class="aligner"> 
 
    <h3>SUPERMAN</h3> 
 
    <p>FTW</p> 
 
    <div class="below"> 
 
    <button>BUTTON</button> 
 
    </div> 
 
</div>

Answer 2

Il testo verrà posizionato al centro e il pulsante sta andando a da posizionare tra il testo e il fondo.

È possibile utilizzare una combinazione di auto margins con un elemento flessibile invisibile per ottenere il layout:

(Edit:. Ho scritto questa risposta prima che la questione è stata aggiornata con il codice di esempio Quindi il mio codice è diverso da quello in la questione. Ma il metodo si applica ancora.)

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
.container > div:nth-child(1) { margin-top: auto; visibility: hidden; } 
 
.container > div:nth-child(2) { margin-top: auto; } 
 
.container > div:nth-child(3) { margin-top: auto; margin-bottom: auto; } 
 

 
/* non-essential decorative styles */ 
 
.container { 
 
    background-color: yellow; 
 
} 
 
.box { 
 
    height: 50px; 
 
    width: 150px; 
 
    background-color: lightgreen; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    font-size: 1.2em; 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
    <div class="box">BUTTON</div><!-- invisible flex item --> 
 
    <div class="box">SUPERMAN</div> 
 
    <div class="box">BUTTON</div> 
 
</div>

jsFiddle

---

Inoltre, con due piccoli aggiustamenti, l'elemento inferiore può essere a filo con il bordo.

.container > div:nth-child(1) { /* margin-top: auto; */ visibility: hidden; } 
.container > div:nth-child(2) { margin-top: auto; } 
.container > div:nth-child(3) { margin-top: auto; /* margin-bottom: auto; */ } 

jsFiddle

O, basta usare justify-content: space-between:

.container > div:nth-child(1) { visibility: hidden; } 
/* .container > div:nth-child(2) { margin-top: auto; } */ 
/* .container > div:nth-child(3) { margin-top: auto; } */ 

.container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    background-color: yellow; 
    height: 100%; 
    box-sizing: border-box; 
    justify-content: space-between; /* NEW */ 
} 

jsFiddle

---

Per maggiori opzioni di allineamento vedere: Methods for Aligning Flex Items