Posizionare elementi di blocco sullo stesso piano
Posizionare elementi di blocco sullo stesso piano
Extrowebsite

Il comportamento di un elemento di blocco, sia esso un contenitore, un titolo, un paragrafo ecc, è noto: esso genera una "nuova riga" sia prima e sia dopo il suo riquadro, quando si trova nel flusso normale della pagina.

Nell'articolo in oggetto verrà spiegato come fare per avere due elementi di blocco sullo stesso piano. Con la proprietà float e display:flex.

Posizionare due elementi di blocco con la proprietà float

Il risultato che otterremo è uguale a all'immagine postata all'inizio dell'articolo. Un contenitore generale ed altri due, opposti, sullo stesso piano.

Il codice HTML

<div class="container">
	<div class="sinistro">Div sx</div>
	<div class="destro">Div dx</div>
</div>

Il codice CSS

Passiamo al codice CSS. Impostiamo prima il codice dell'elemento contenitore.

.container{
width:800px;
margin:30px auto;
background:lightgrey;
height:200px;
line-height:200px;
overflow: hidden;
}

Il contenitore non presenta alcun codice particolare. Tali misure possono essere tranquillamente cambiate a seconda delle proprie esigenze.

Il codice CSS in comune per i due elementi interni:

.sinistro, .destro {
margin:0;
padding:0;
width:200px;
height:200px;
background:cornflowerblue;
text-align:center;
color: #fff;
font-size:30px;
}

In ultimo abbiamo le due dichiarazioni più importanti, distinte e separate:

.sinistro{float:left;}

.destro{float:right;}

Queste condizioni fanno in modo da "spingere" verso destra, o verso sinitra, gli elementi ai quali la proprietà viene assegnata.

Se volessimo rendere flottanti due elementi "in linea", come uno span, img ecc. ci si deve ricordare di renderli come elementi di blocco. Esempio:

img-sx{display:block; float:left;}

img-dx{display:block; float:right;}

Posizionare elementi di blocco sullo stesso piano con la proprietà display:flex

Elementi di blocco sullo stesso piano con la proprietà display:flex
Elementi di blocco sullo stesso piano con la proprietà display:flex

Oltre alla proprietà float, è possibile utilizzarne un'altra per ottenere lo stesso risultato. display: flex.

L'immagine più su postata mostra quanto andremo ad ottenere.

Il codice HTML per la proprietà display:flex

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
</div>

Il codice CSS

Il codice CSS cambia in maniera radicale rispetto a quello visto per il primo esempio. Infatti abbiamo:

.flex-container{
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
width: 800px;
height: 200px;
background-color:lightgrey;
margin:30px auto;
}

display:flex è il valore della proprietà display con cui si imposta il contenitore flessibile

Onde evitare di dilungarmi nella spiegazione del "Flexible box", possiamo asserire che tale modulo dei CSS consente di usare una serie di proprietà che sostituiscono i "trucchi" che si usavano fino a qualche tempo fa.

La specifica è stata introdotta per rendere più semplice ed immediata la gestione di elementi, prettamente box, all’interno di un elemento contenitore, per risolvere problemi quali la centratura, la disposizione sull’asse orizzontale o verticale, la gestione dello spazio disponibile, il dimensionamento relativo dei box contenuti in un contenitore flessibile, l’indipendenza della posizione degli elementi presenti sulla pagina rispetto al codice sorgente.

Proseguiamo con il codice CSS per gli elementi interni.

.flex-item {
background-color:cornflowerblue;
width: 200px;
height:200px;
line-height:200px;
text-align:center;
color: #fff;
font-size:30px;
}

Il risultato, come anticipato nell'immagine, è esattamente uguale al primo. Abbiamo a disposizione due metodi per raggiungere lo stesso obbiettivo.