Accentsconagua
Ecco il primo oggetto
Ecco il prossimo oggetto
Il terzo oggetto
Il quarto oggetto
Share
Se hai iniziato a scrivere CSS qualche anno fa, è probabile che ti sia abituato a qualche stranezza dei layout CSS che hai preso per essere inevitabile. Ad esempio, utilizzando elementi posizionati in modo assoluto all'interno di elementi posizionati relativamente, o usando clearfix in combinazione con galleggianti per ottenere griglie di colonna.
Intuitivamente, abbiamo pensato tutti che dovesse esserci un modo migliore. Dopotutto, è un po 'strano che la migliore soluzione per il centraggio verticale abbia comportato l'utilizzo display: table; e stili associati. Perché dovremmo usarlo hack per far funzionare le cose fondamentali?
Il scatola flessibile modulo, o FlexBox in breve, è la soluzione emergente per molti dei nostri problemi passati e si adatta a una serie di modelli di progettazione che sono diventati prevalenti. L'idea alla base di flexbox è di consentire alla scatola di elementi di contenere di ridimensionare e riordinare quegli elementi per adattarli al meglio al contenitore in modo appropriato.
Flexbox non è destinato all'uso necessariamente a livello di sito. La specifica della griglia CSS è in lavorazione per risolvere questo problema, ma sfortunatamente è ancora in uno stato meno supportato di Flexbox, che ha almeno un supporto parziale in tutti i browser ad eccezione di Opera Mini. Al contrario, la specifica della griglia CSS è completamente supportata da IE, con supporto sconosciuto o assente in tutti gli altri browser.
Flexbox è destinato all'uso per porzioni discrete di un layout. In questo articolo, tratteremo alcuni compiti comuni che possono essere svolti in modo più efficace con flexbox e spieghiamo la sintassi di come otteniamo risultati particolari. Per ottenere una panoramica completa di tutte le opzioni di proprietà, dai un'occhiata al post Trucchi CSS su flex box Guida a Flexbox.
Prima della flexbox, il centraggio verticale del contenuto dinamico era un compito non banale. (Vedi questo post di Smashing Mag e questo articolo su CSS-Tricks per la storia completa.) Con la flexbox, tutto è diventato più semplice. Configureremo un contenitore di base con elementi figlio.
Test del centro verticaleUn test secondarioIl terziario è per tre
Il nostro obiettivo è centrare questi elementi verticalmente e orizzontalmente. Con flexbox, è semplice come la seguente:
.container width: 500px; altezza: 500 px; margine: 0 auto; background-color: #dedede; / * Regole flessibili * / display: flex; flex-flow: column nowrap; justify-content: center; align-items: center;
Nota: che non stiamo usando le versioni con prefisso del venditore, ma dovresti! In alternativa, dai un'occhiata a Autoprefixer.
Avrai notato alcune nuove regole non familiari applicate qui; Flexbox è un modulo che comprende un numero di proprietà. Per iniziare, il Display: flettere crea il nostro contenitore flexbox e i suoi elementi figlio vengono automaticamente trattati come elementi flessibili.
Salvo diversa indicazione, i nostri articoli flessibili scorreranno in linea lungo l'asse principale. però, flex-flow (che è una scorciatoia per il flex-direzione e flex-wrap proprietà) può modificare sia l'asse principale che quello incrociato. flex-flow: colonna nowrap dice a flexbox che vogliamo che il nostro contenuto venga visualizzato in una colonna verticale e che non vogliamo che i nostri elementi vengano avvolti (costringendoli a passare alla riga successiva).
justify-contenuti a centro, che allinea i nostri oggetti al centro dell'asse principale, che si basa sulla direzione definita dal flex-flow, in questo caso l'asse verticale. align-items: center allinea i nostri articoli in relazione all'asse secondario ("croce").
C'è un problema intrinseco con un approccio tradizionale al layout, specialmente quando si tratta di contenuti sensibili. Quando si utilizzano i float, ad esempio, è facile vedere il contenuto di una pagina in un ordine completamente diverso da quello naturale o cognitivo. Inoltre, è molto difficile manipolare l'ordine degli elementi in una pagina. Con la flexbox, affronteremo uno dei layout più difficili da ottenere per i CSS tradizionali; un impilamento di elementi in ordine allineato, invertito in ordine superiore. Quindi, in altre parole, l'elemento che appare primo nel markup apparirà scorso sullo schermo e aggiungendo nuovi elementi nella parte inferiore della marcatura, appariranno nella parte superiore dello schermo.
Useremo questo codice:
Con il seguente CSS, possiamo ottenere ciò che stiamo cercando di fare facilmente.
main position: relativo; altezza: 100%; display: flex; flex-flow: column-reverse nowrap; justify-content: flex-end; align-items: center;
Questo ci darà esattamente ciò a cui miriamo. Visualizza i risultati (con alcuni stili extra per una visualizzazione più semplice) qui.
Creando una colonna inversa sul flex-flow, stiamo chiedendo a flexbox di invertire l'ordine degli articoli. Vogliamo allineare il contenuto alla fine della linea trasversale della flexbox, che nel caso della colonna invertita è una linea verticale che va dal fondo della scatola alla cima.
Abbiamo anche impostato align-articoli: Centro centrare gli articoli nella colonna orizzontalmente. Questo è utile per qualsiasi tipo di impilamento di elementi, in cui l'ordine cognitivo (primo all'ultimo) non corrisponde all'ordine visivo (dall'alto in basso).
Esistono molte situazioni in cui è necessario riordinare gli elementi in base alle dimensioni dello schermo. Le soluzioni comuni a questo problema sono solitamente contorte, oppure ripetono il markup. Guarda questo esempio, in cui abbiamo spostato un'immagine in evidenza dall'essere nel flusso di un articolo all'inizio dell'articolo usando il semplice ordine proprietà. Usiamo il seguente codice HTML:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam eum repudiandae ullam ipsum repellendus officiis eaque une au e porro accusamus placeat earum qui quia quidem totam harum odit voluptates?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem provident voluptas commodi atque. Consequatur non natus earum nobis exercitationem sapiente dolorem explicabo asperiores soluta unde est voluptatibus fugit officia quo.
E il CSS allegato:
main display: flex; Flusso flessibile: avvolgimento di riga; img flex-grow: 1; larghezza: 200 px; ordine: 3; p flex: 1 auto; ordine: 1; imbottitura: 10px; background-color: #dedede; margine: 0; p: nth-child (3) order: 2; flex: 3 0 50px; @media solo schermo e (larghezza massima: 600px) img ordine: 1; p flex: 1 auto; ordine: 2; imbottitura: 10px; background-color: #dedede; margine: 0; p: nth-child (3) order: 3; flex: 3 0 50px;
Questa è solo la punta dell'iceberg quando si tratta della potenza fornita da Flexbox per fare in poche righe di codice ciò che è comunemente molto più difficile da ottenere.
Quante volte ti è stato frustrato che 100/3 fosse impossibile da fare, e successivamente ricorrere a creare colonne con larghezza del 99,9%, solo per rendersi conto di quanto sia scarsa la soluzione? Flexbox risolve questo problema una volta per tutte. Prendi il markup:
analisianalisianalisi
E aggiungi il CSS per far apparire tutte e tre le colonne, calcolate perfettamente.
.container display: flex; justify-content: center; allinea-contenuto: spazio-tra; background-color: #dadada; .column width: 100%; imbottitura: 50px; allineamento del testo: centro; box-shadow: 0 0 10px # c0c0c0;
Vuoi un po 'di grondaia? Nessun problema. Aggiungi semplicemente margine al tuo .colonna classe. I calcoli per la spaziatura corretta sono fatti per te.
Dai un'occhiata al fantastico repository GitHub "Risolto da Flexbox" per ulteriori esempi. Flexbox è un modulo estremamente potente, come speriamo sia stato dimostrato attraverso questo articolo. Quali sono alcuni altri casi d'uso potenti ed eccitanti che vedi per la flexbox? Fateci sapere nei commenti!
