Abbiamo già parlato di Flexbox in due precedenti articoli: Introduzione a Flexbox (https://lnx.instantwebsites.it/iwblog/2019/01/introduzione-a-flexbox/) e Layout a 2 o più colonne con Flexbox (https://lnx.instantwebsites.it/iwblog/2021/05/layout-a-2-o-piu-colonne-con-flexbox/)

Vediamo ora un’interessante proprietà di Flexbox che riguarda il testo inserito in un box definito con flex.

Anche in questo caso, come negli altri articoli, è stato preparata una pagina HTML visualizzabile cliccando qui.

In quella pagina, abbiamo definito un box chiamato .contenitore e tre altri box al suo interno, identificati con la classe .box.

Quello che segue è il codice CSS:

.contenitore {
background: #FFF;
display: flex;
flex-direction: row;
column-gap: 30px;
}

.box {
width: 200px;
height: 200px;
background: #FF0;
display: flex;
justify-content: center;
}


.box p {
margin-top: auto;
}


Andando per ordine: al div.contenitore è stata assegnata la proprietà display: flex; ed i tre box al suo interno vengono disposti su una riga (flex-direction: row;) e separati da uno spazio pari a 30px (column-gap: 30px).

Assegnando la stessa proprietà display: flex; anche ai tre box interni, otteniamo la possibilità di posizionare il testo al loro interno in fondo al box stesso tramite la dichiarazione: margin-top: auto; mentre la centratura si ottiene assegnando la proprietà justify-content:center; al box.

E’ una possibilità interessante poiché evitiamo di fare ricorso a tecniche più complicate, basti pensare che in passato si sarebbe dovuto fare ricorso al posizionamento assoluto del testo stesso con risultati potenzialmente indesiderati.