Layout della scatola flessibile
Con l'avvento del CSS Flexible Box , molti degli incubi dei web designer 1 sono stati risolti. Uno dei più confusi, l'allineamento verticale. Ora è possibile anche ad altezze sconosciute .
"Due decenni di hack di layout stanno finendo. Forse non domani, ma presto, e per il resto della nostra vita."
- Il leggendario CSS Eric Meyer al W3Conf 2013
Flexible Box (o in breve, Flexbox), è un nuovo sistema di layout appositamente progettato per scopi di layout. Le specifiche indicano :
Il layout flessibile è superficialmente simile al layout a blocchi. Manca molte delle più complesse proprietà centrate sul testo o sul documento che possono essere utilizzate nel layout a blocchi, come float e colonne. In cambio guadagna strumenti semplici e potenti per la distribuzione dello spazio e l'allineamento dei contenuti in modi spesso necessari alle webapp e alle pagine Web complesse.
Come può essere d'aiuto in questo caso? Bene vediamo.
Colonne allineate verticali
Usando Twitter Bootstrap abbiamo .rowalcuni messaggi .col-*. Tutto quello che dobbiamo fare è visualizzare il .row2 desiderato come una scatola contenitore flessibile e quindi allineare verticalmente tutti gli elementi flessibili (le colonne) in base alla align-itemsproprietà.
ESEMPIO QUI (leggere attentamente i commenti)
<div class="container">
<div class="row vertical-align"> <!--
^-- Additional class -->
<div class="col-xs-6"> ... </div>
<div class="col-xs-6"> ... </div>
</div>
</div>
.vertical-align {
display: flex;
align-items: center;
}
Il risultato
L'area colorata mostra il riquadro di riempimento delle colonne.
Chiarire align-items: center
8.3 Allineamento trasversale: la align-itemsproprietà
Gli articoli flessibili possono essere allineati nell'asse trasversale della linea corrente del contenitore flessibile, simile justify-contentma nella direzione perpendicolare. align-itemsimposta l'allineamento di default per tutti gli elementi del contenitore flessibile, tra anonimi oggetti flex .
align-items: center;
Per valore centrale, la casella del margine dell'elemento flessibile è centrata nell'asse trasversale all'interno della linea.
Allerta grande
Nota importante n. 1: Twitter Bootstrap non specifica le widthcolonne in dispositivi extra piccoli a meno che tu non dia una delle .col-xs-#classi alle colonne.
Pertanto, in questa particolare demo, ho usato le .col-xs-*classi per visualizzare correttamente le colonne in modalità mobile, perché specifica widthesplicitamente la colonna.
Ma in alternativa si può spegnere il layout di Flexbox semplicemente cambiando display: flex;a display: block;in dimensioni dello schermo specifici. Per esempio:
/* Extra small devices (767px and down) */
@media (max-width: 767px) {
.row.vertical-align {
display: block; /* Turn off the flexible box layout */
}
}
Oppure puoi specificare .vertical-align solo su dimensioni dello schermo specifiche in questo modo:
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
In tal caso, seguirei l' approccio di @KevinNelson .
Nota importante n. 2: prefissi del fornitore omessi per brevità. La sintassi di Flexbox è stata modificata nel tempo. La nuova sintassi scritta non funzionerà con le versioni precedenti dei browser Web (ma non così vecchia come Internet Explorer 9! Flexbox è supportato su Internet Explorer 10 e versioni successive).
Ciò significa che è necessario utilizzare anche proprietà con prefisso fornitore come display: -webkit-boxe così via in modalità di produzione.
Se fai clic su "Attiva / disattiva vista compilata" nella Demo , vedrai la versione con prefisso delle dichiarazioni CSS (grazie a Autoprefixer ).
Colonne a tutta altezza con contenuti allineati verticali
Come si vede nella demo precedente , le colonne (gli oggetti flessibili) non sono più alte del loro contenitore (la scatola del contenitore flessibile. Cioè l' .rowelemento).
Ciò è dovuto all'uso del centervalore per la align-itemsproprietà. Il valore predefinito è in stretchmodo che gli elementi possano riempire l'intera altezza dell'elemento principale.
Per risolvere questo problema, puoi aggiungere anche display: flex;alle colonne:
ESEMPIO QUI (Ancora una volta, attenzione ai commenti)
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
}
Il risultato
L'area colorata mostra il riquadro di riempimento delle colonne.
Ultimo, ma non meno importante, notare che le demo e gli snippet di codice qui sono pensati per darti un'idea diversa, per fornire un approccio moderno per raggiungere l'obiettivo. Si prega di tenere presente la sezione " Big Alert " se si intende utilizzare questo approccio in siti Web o applicazioni reali.
Per ulteriori letture incluso il supporto del browser, queste risorse sarebbero utili:
1. Allineare verticalmente un'immagine all'interno di un div con un'altezza reattiva
2. È meglio utilizzare una classe aggiuntiva per non alterare l'impostazione predefinita di Bootstrap di Twitter .row.
div, no il testo all'interno, qualcosa del genere jsfiddle.net/corinem/Aj9H9 ma in questo esempio non uso bootstrap