Applicazione pratica Flexbox. FlexBox: il nuovo principio CSS dei layout è imparato a Flexbox e come applicarlo.

Quanto è facile lavorare con flexbox sull'esempio di un layout del modello di layout.

Credimi, non c'è bisogno di un'analisi dettagliata di tutti gli aspetti di lavorare con FlexBox se vuoi iniziare a utilizzarli ora. In questa guida, l'autore ti introdurrà in alcune proprietà Flexbox e fare una "News Leiaut" come quella che si poteva vedere sul sito web del Guardian.

Il motivo per cui l'autore utilizza FlexBox è un gran numero di funzionalità che fornisce:
- facilità di creare colonne adattative;
- la creazione di colonne della stessa altezza;
- Capacità di premere i contenuti nella parte inferiore del contenitore.

Andiamo!

1. Iniziamo con la creazione di due colonne

Creando colonne guida di CSS. Ha sempre attirato alcune difficoltà. Per lungo tempo, per l'esecuzione di questo compito, i galleggianti e / o le tabelle sono stati ampiamente utilizzati (e utilizzati), ma ognuno di questi metodi aveva (e ha) i suoi inconvenienti.

A sua volta, FlexBox semplifica questo processo, avendo un numero di tali vantaggi come:

Scrivere un codice più "pulito": solo è necessario creare un contenitore con regola display: flex;
- Flessibilità: possiamo modificare le dimensioni, la distesa e le colonne di livello modificando la coppia di stringhe CSS;
- Marcatura semantica;
- Inoltre, l'utilizzo di FlexBox scompare la necessità di annullare la razionalizzazione per evitare comportamenti imprevedibili di Laouta.

Iniziamo a lavorare con la creazione di due colonne, una delle quali occuperà 2/3 larghezza del nostro contenitore e un altro 1/3 della sua parte.

Ecco due elementi:

Contenitore colonne;
- due sussidiarie colonna., uno dei quali ha una classe aggiuntiva colonna principale.che usiamo più tardi per rendere una colonna più ampia.

Colonne (display: flex;) .Column (Flex: 1;). Colonna-Colonna (Flex: 2;)
Nella misura in cui colonna principale. Masching flex uguale 2 Quindi questa colonna richiederà il doppio dello spazio rispetto al secondo.

Aggiungeremo un po 'di progettazione visiva e, alla fine, otteniamo:

Clicca per vedere in azione

2. Crea ogni colonna del contenitore Flexbox

Ciascuna delle due colonne conterrà diversi articoli disposti verticalmente, quindi noi, a sua volta, dovremmo fare anche contenitori Flexbox da questi due elementi.

Quindi, abbiamo bisogno di articoli:

Situato verticalmente all'interno della colonna del contenitore;
- Occupato tutto il posto disponibile.

Regola flex-Direction: colonnaspecificato per il contenitore, insieme alla regola flex: 1.specificato per l'elemento figlio consente all'articolo di riempire tutto il vertice verticale gratuito, mentre l'altezza delle prime due colonne rimarrà invariata.

Clicca per vedere in azione

3. Fai un contenitore dall'articolo

Ora, al fine di espandere ulteriormente le nostre opportunità, immaginiamo ogni articolo sotto forma di un contenitore Flexbox. Ogni tale contenitore conterrà:

Intestazione;
- paragrafo;
- Pannello informativo con nome dell'autore e numero di commenti;
- Alcune foto adattative.

Qui usiamo flexbox per "premere" il pannello delle informazioni sulla parte inferiore dell'elemento. Qui, guarda, che risultato ci aspettiamo di ottenere.

Ed ecco il codice stesso:

.Article (display: flex; Flex-Direction: colonna; flex-base: Auto; / * Imposta la dimensione iniziale dell'articolo a seconda del suo contenuto * /). Corpo-corpo (display: flex; flex: 1; flex- Direzione: colonna;).) .Article-Content (Flex: 1; / * Content riempie il luogo rimanente, premendo così il pannello delle informazioni in basso * /)
Gli elementi all'interno dell'articolo sono situati verticalmente grazie all'uso della regola. flex-Direction: colonna.

Abbiamo anche applicato la proprietà Flex: 1. All'elemento aRTICOLO-CONTENUT.così allungandolo su tutto lo spazio libero e pressato informazioni sull'articolo In basso. L'altezza delle colonne in questo caso non importa.

Clicca per vedere in azione

4. Aggiungi alcune colonne nidificate

In effetti, abbiamo bisogno della colonna di sinistra per includere alcune altre colonne. Pertanto, dobbiamo sostituire il secondo elemento responsabile per l'articolo, il contenitore colonne.che abbiamo usato prima.

Dal momento che vogliamo che la prima colonna incorporata sia più ampia, aggiungi alla classe elemento colonna annidata., e in CSS sottolineiamo:

Colonna nidificata (flex: 2;)
Ora questa colonna sarà due volte più larga del secondo.

Clicca per vedere in azione

5. Fai il primo articolo con il leuaut orizzontale

Il primo articolo che siamo in realtà grandi. Al fine di utilizzare efficacemente il posto sullo schermo del monitor, cambiamo il suo orientamento su orizzontale.

Primo articolo (Flex-Direction: Row;) .first-Article .Article-Body (Flex: 1;) .first-Article .Article-Image (Altezza: 300 px; Ordina: 2; imbottitura: 0; larghezza: 400 px;)
Proprietà ordine In questo caso, svolge un ruolo importante, poiché consente di modificare la sequenza di elementi HTML senza modificare il markup HTML. In realtà, immagine dell'articolo Nel codice diventa prima dell'elemento articolo-corpo.Ma si comporta come se lo sta succedendo.

Clicca per vedere in azione

6. Facciamo adattivo Leiaut

Ora tutto sembra volevamo, anche se è un po 'appiattito. La riformiamo aggiungendo flessibilità alla nostra letezza.

Una delle cose meravigliose in flexbox è che è sufficiente eliminare la regola Display: flex. Nel contenitore per disabilitarlo (Flexbox), mentre le sue proprietà rimanenti (come allineamenti-elementi. o flettere) Resta lavoratori.

Di conseguenza, possiamo attivare Adaptive Leiaut utilizzando FlexBox solo quando c'è bisogno di questo.

Quindi rimuoveremo display: flex. dai selettori .Columns. e .colonna., invece "fuslimando" in una richiesta di media:

Schermo @media e (larghezza min-larghezza: 800px) (.Columns, .Column (display: flex;))
È tutto! Sugli schermi con una piccola risoluzione, tutti gli articoli si troveranno su un altro, e sugli schermi con una risoluzione di oltre 800 pixel in due colonne.

7. Aggiungi i colpi finali

Affinché Leiaut di sembrare più attraente grandi schermiAggiungiamo alcune modifiche CSS:

Schermo @media e (min-larghezza: 1000 px) (.first-Article (Flex-Direction: Row;) .first-Article .Article-Body (Flex: 1;) .First-Article .Article-Image (altezza: 300 px ; Ordine: 2; imbottitura-top: 0; larghezza: 400 px;). Colonna-colonna (Flex: 3;) .Nest-colonna (Flex: 2;))
Il contenuto del primo articolo è allineato orizzontalmente: il testo si trova sul lato sinistro e l'immagine è giusta. Inoltre, la colonna principale ora è diventata più ampia (75%). Lo stesso vale per la colonna nidificata (66%).

Ed ecco il risultato finale!

Clicca per vedere in azione

Produzione

Ora tu stesso, vedi che puoi usare flexbox nei tuoi progetti, non puoi nemmeno adattarti a tutte le sue sottigliezze, e il Leiaut creato è un chiaro esempio. Almeno l'autore spera davvero.

FlexBox è un set completamente nuovo di proprietà CSS che consente al cameramen di creare layout flessibili per i siti. È ottimo per i cosiddetti layout reattivi, perché riduce drasticamente la complessità del layout. I moderni browser (compresi i browser IE10 +, iOS e Andrioid sono già supportati da Flexbox, quindi se non hai ancora sentito parlare di Flexbox, allora è il momento di imparare.

Flexbox pronto per l'uso

Il web è stato originariamente concepito come un meccanismo per lo scambio di documenti scientifici. Da allora, la tecnologia è diventata molto fatta avanti, ma usiamo ancora usando CSS, le quali sono quelle pubblicazioni digitali.

Infatti, il layout del CSS e il posizionamento di elementi sulla pagina sono uno dei concetti più complessi per i versi, indipendentemente dalla loro esperienza. Per layout, usano proprietà come float, deselezione, display: blocco, display: inline per i layout dei loro siti. Ma ora, con il nuovo display della proprietà CSS: FlexBox può essere impostato direzione, posizione e lacune tra elementi di pagina.

Display: -Webkit-box; / * Vecchio - iOS 6-, safari 3.1-6 * / display: -moz-box; / * Vecchio - Firefox 19- (Buggy ma soprattutto funziona) * / display: -ms-flexbox; / * Tweeger - cioè 10 * / display: -Webkit-flex; / * Nuovo - Chrome * / display: flex; / * NUOVO, SPEC - OPERA 12.1, Firefox 20+ * /

FlexBox è una soluzione elegante di un lungo problema confuso nel layout. Negli ultimi anni, i vestatori hanno atteso il supporto per i browser della nuova proprietà del display: Flexbox, e alla fine è successo - ultime versioni Tutti i principali browser lo supportano. Maggiori informazioni sul supporto.

Usando flexbox e le sue proprietà

Combinazione di query FlexBox e CSS Media (query multimediali) è un potente strumento. Nell'esempio qui sotto ho fatto una versione semplificata pagina principale Sito web dell'albero I uso approccio moderno Mobile-First e Flexbox. Aprire questo esempio e agitare la dimensione della finestra del browser.

A prima vista, potrebbe sembrare che nell'esempio non c'è niente di speciale, ma se guardi il codice, puoi vedere che il layout è fatto senza utilizzare la proprietà Float: sinistra o float: a destra. Il display: blocco o display: anche le proprietà in linea non vengono utilizzate.

Display proprietà: flex

Display: flex | Inline-flex.

Display proprietà: flex si applica al contenitore principale che diventa " contenitore flessibile"(Flex-Container), così come tutti i suoi discendenti dritti sono" elementi flessibili "(elementi flessibili). Contenitore flessibile ha l'asse principaleche imposta la direzione principale per i suoi discendenti diretti (elementi flessibili). Asse trasversale Perpendicolare all'asse principale. Entrambi questi assi hanno un insieme di proprietà con cui è possibile controllare la posizione di elementi flessibili rispetto a vicenda nel contenitore.

Puoi anche creare contenitori Flex nidificati, come ho fatto nell'esempio sopra, perché Display Proprietà: Flex non è ereditata. Blocchi con lezioni. Intestazione I.Nav ha assegnato la proprietà del display: Proprietà Flex. Questo è simile all'attuazione di righe e colonne nella Fondazione quadro CSS.

Appunti:

• CSS-colonne colonne. Non lavorare con il contenitore Flex.
• float, chiaro e allineatura verticale non funziona con elementi flessibili

Proprietà flessibile

Flex-Direction: Row | Retromarcia riga | Colonna |. Colonna retromarcia.

• riga (predefinito): da sinistra a destra per LTR, a destra a sinistra per RTL;
• retromarcia riga.: da destra a sinistra per LTR, da sinistra a destra per RTL;
• colonna.: simile alla riga, in alto;
• colonna retromarcia.: Simile a riga-retromarcia, in basso verso l'alto.

La proprietà Flex-Direction imposta la direzione dell'asse principale. L'asse principale determina la direzione e non necessariamente orizzontale, ad esempio, quando la visualizzazione sui browser mobili, tutti gli elementi del contenitore (elemento Flex) sono raggruppati in 1 colonna nell'altro. Questo è impostato usando la direzione flessibile: colonna. Per realizzare gli elementi del contenitore nella direzione orizzontale, è sufficiente impostare Flex-Direction: Row.

Perché Per impostazione predefinita, il valore della Flex-Direction: La proprietà della riga è quindi, anche se non si dichiara, gli elementi del contenitore Flex saranno posizionati orizzontalmente.

Proprietà Flex.

Flex: Nessuno | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

Valore predefinito: Flex: 0 1 Auto.

Proprietà flettere Utilizzato per elementi del contenitore flessibile. esso breve postCon il quale è possibile impostare diverse proprietà separate contemporaneamente: Flex-cresci, flex-shrink e flex-base.

Le proprietà Flex-Grow e Flex-Shrink determinano il modo in cui lo spazio occuperà ciascun elemento del contenitore Flex relativo l'uno con l'altro. Flex-cresciuto predefinito: 0 e flex-restringersi: 1. Ciò significa che tutti gli elementi saranno proporzionali l'uno all'altro.

La proprietà Flex-Base determina la dimensione degli elementi per riempire l'intero spazio del contenitore Flex. Il valore di questa proprietà è aUTO..

Non sono richieste le ultime 2 proprietà di flex-shrink e flex-base. Nell'esempio sopra, ho impostato il valore Flex: 1 per un blocco con una classe .AV, che è la stessa se si prescrive Flex-Grow: 1. Un altro elemento flessibile nel contenitore. Intestazione è l'elemento H1 con Class.Logo, per quale flex-Grow: 0 è installato, quindi l'elemento.NAV richiederà sempre più spazio rispetto all'elemento.Logo.

Giustificare la proprietà del contenuto

Giustifica-contenuto: flex-start | Flex-End | Centro |. Spazio-tra | Spazio-giro.

Una delle mie proprietà preferite, la proprietà Justify-Content determina l'allineamento relativo all'asse principale, contribuendo a distribuire lo spazio libero rimanente all'interno del contenitore Flex, ad esempio, quando i suoi elementi non sono più "stretching", o allungati, ma hanno già raggiunto la sua dimensione massima. Consente inoltre in qualche modo per controllare l'allineamento degli elementi quando viene rilasciata la stringa.

• flex-start. (predefinito): elementi spostati all'inizio della linea;
• flex-end.: Gli elementi vengono spostati entro la fine della stringa;
• centro: Gli elementi sono allineati al centro della linea;
• spazio-mezzo.: Gli elementi sono distribuiti uniformemente (il primo elemento all'inizio della linea, l'ultimo - alla fine);
• spazio-giro.: Gli elementi sono distribuiti uniformemente con una distanza uguale tra loro e i confini della stringa.

Illustrazione delle proprietà di Justyfy-Content:

Nel mio esempio, un blocco con una classe. Hader ho prescritto il valore della giustificazione-contenuto: spazio-mezzo. Ciò significa che il primo elemento del contenitore Flex sarà localizzato all'inizio dell'inizio principale (vedere l'immagine nella proprietà del capitolo: flex) e l'ultimo elemento sarà posizionato alla fine della fine principale. Tutti gli elementi del contenitore Flex che sono tra il primo e il secondo saranno distribuiti uniformemente.

Per un oggetto con una classe .AV ho applicato la proprietà Justify-Content: Space-Around per distribuire l'intero spazio uniformemente con i depositi attorno a ciascun elemento del contenitore Flex.

In custodia

Ho elencato solo alcune proprietà che il modulo ha flexbox.. Questa è una tecnologia di layout abbastanza nuova, e come viene introdotta in progetti, completerò l'articolo con nuove proprietà benefiche che semplificheranno fortemente la creazione di layout reattivi di alta qualità per i siti.

FlexBox è una conveniente tecnologia di layout che non può essere uno strumento sostitutivo per costruire HTML. Modelli.

Qualsiasi vestigur durante lo sviluppo di progetti ha una strategia specifica per la marcatura. Molti scrivono HTML puro o usa framework popolari. Se il Brandymer è comodamente in modo illusivo quando si lavora con le tecnologie familiari e raggiunge il successo, è un indicatore di un buon specialista. Ma Flexbox. Può diventare uno strumento indispensabile ausiliario o principale per organizzare un codice competente.

Sviluppatori per un lungo periodo di tempo utilizzato per layout della tabella, elementi float, blocco in linea e altre proprietà CSS per fornire ai blocchi la posizione desiderata. Le cose semplici, come un centraggio verticale, sono state effettuate abbastanza difficili. La creazione di un layout basata su griglie flessibili è considerata una pratica competente, motivo per cui il CSS-Frameworks basato sulle griglie ha ricevuto diffuso.

L'idea dell'idea principale con flexbox nel contenitore finale con la possibilità di modificare la larghezza / altezza (e ordine) dei suoi elementi per il miglior riempimento dello spazio (nella maggior parte dei casi - per supportare tutti i tipi di display e dimensioni degli schermi).

Specifiche di base. Modulo di layout della scatola flessibile CSS (o semplicemente flexbox) - dà strumenti eccellenti Per risolvere un gran numero di compiti vari. FlexBox consente di mantenere il controllo delle dimensioni, dell'ordine e dell'allineamento di elementi su diversi assi. Puoi anche controllare la distribuzione dello spazio libero tra gli elementi e molto altro.

FlexBox ha una serie di vantaggi:

1. Il nome "Flex" stesso chiarisce che tutti i blocchi possono essere facilmente flessibili. Gli elementi necessari possono essere compressi e stirati da regole speciali, prendendo così lo spazio necessario.
2. La linea di testo di base è facilmente allineata verticalmente e orizzontalmente.
3. L'ordine degli elementi nel modello non svolge un ruolo decisivo. Se necessario, può essere modificato negli stili particolarmente importanti per alcuni aspetti del layout adattivo.
4. Per compilare l'intero luogo fornito, gli elementi possono attirare automaticamente in diverse righe o colonne.
5. La maggior parte delle lingue del mondo ha la forma di scrittura sulla RTL destra a sinistra (destra a sinistra), in contrasto con il solito LTR (da sinistra a destra). Feature F LexBox è che è adattato per questo, come è per lui il concetto di inizio e fine, non il diritto e Lev. Nei browser con impostazione RTL, tutti gli elementi si trovano automaticamente in un ordine inverso.
6. La sintassi delle regole CSS è intuitivamente semplice e rapidamente masterizzata.

Storia flexbox.

• 2008 anni - Il gruppo di lavoro CSS conduce una discussione sull'applicazione "Modello di scatola flessibile" basato su XUL (linguaggio dell'interfaccia utente XML - la lingua di marcatura nelle applicazioni Mozilla) e XAML (linguaggio di markup dell'applicazione estensibile - Lingua del markup per applicazioni Microsoft).
• anno 2009. - Draft pubblicato "Modulo di layout della scatola flessibile". Chrome e Safari Aggiungono supporto parziale, mentre Mozilla comincia a supportare la sintassi Xul-Like, nota come "FlexBox 2009". Se, durante la lettura di un post del blog o cerca informazioni su Flexbox da qualsiasi altra fonte, troverai tali espressioni come display: box; O le proprietà della casella simile - (*), quindi questo significa che sei una versione obsoleta di Flexbox, campione 2009.
• 2011. - La scheda Atkins è presa per lo sviluppo di flexbox e pubblica 2 bozze. In queste bozze, la sintassi cambia in modo significativo. Chrome, Opera e IE 10 Introdurre il supporto per questa sintassi nota come "FlexBox 2011".
• 2012 anno - La sintassi cambia nuovamente e specificata. La specifica riceve lo stato della raccomandazione candidata e diventa nota come "FlexBox 2012". L'opera implementa il supporto della proprietà, Chrome supporta le specifiche correnti con i prefissi e Mozilla senza di loro, IE10 aggiunge supporto per la sintassi completa "FlexBox 2011".
• Dal 2014. dell'anno - Tutti i nuovi browser supportano le ultime specifiche (anche Internet Explorer 11). Se c'è qualche guida o post sul blog su FlexBox contengono disegni come display: flex; e flex- (*), visualizzano informazioni correnti contenute nella versione corrente delle specifiche.

Supporto del browser

Sintassi straniero, ma obsoleto, il campione 2009 è abbastanza buono supportato La maggior parte dei browser, il supporto è implementato in: Chrome, Firefox 2+, Safari 3.1+, ecc. È quasi ovunque, ad eccezione, ad eccezione delle 9 e precedenti versioni di IE e dell'opera. Ma sfortunatamente, l'attuazione di questa tecnologia nei browser era incompleta e parzialmente incoerente, che era la ragione della revisione delle specifiche.

Nonostante il fatto che la vecchia sintassi sia supportata dai browser, il suo uso non è raccomandato, il motivo per cui la vecchia versione della specifica non è più rilevante. In futuro, dopo un certo periodo di tempo, i browser cesseranno sicuramente il suo sostegno. In ogni caso, poiché la nuova sintassi è molto più facile da studiare e utilizzare, allora è probabile che la sua implementazione sarà più profonda. Quei browser che non hanno ancora supportato i moduli Flexbox inizieranno a farlo in una nuova forma fornita dalle ultime specifiche, che ha ricevuto lo stato del CR. ( Raccomandazione candidata - * candidato nella raccomandazione dello standard, e quindi tecnicamente pronto per l'implementazione e non dovrebbe essere soggetto a modifiche.)

Attraverso IE 10, quindi questo è forse l'unico caso di supporto per la versione intermedia, non perfetta della flexbox (che utilizza il display: FlexBox Value;). (* Inoltre, richiede l'uso del prefisso del venditore -ms-).

Sintassi di base.

Dato che FlexBox è un intero modulo, e non solo una singola proprietà, combina molte proprietà. Alcuni di loro dovrebbero essere applicati al contenitore (elemento genitore, il cosiddetto contenitore flessibile), mentre altre proprietà si applicano agli elementi figlio, o elementi flessibili.

Per iniziare a utilizzare devi specificare un contenitore display: flex. o display: inline-flex .

Flex_container (display: flex;)

Le proprietà principali del contenitore Flex.

Uno dei concetti di base in flexbox è l'asse.

• Home Ace. Il contenitore Flex è una direzione, in conformità con il quale è stata costruita la posizione di tutte le sue controllate.
• Asse trasversale - Questa è una direzione perpendicolare per l'asse principale.

Per impostazione predefinita, l'asse principale in LTR LOROGI si trova sulla destra sinistra, e l'asse trasversale è dall'alto verso il basso. Quando si utilizza la base CSS, le proprietà della direzione flessibile possono essere impostate la direzione dell'asse principale del contenitore Flex.

flex-Direction - Direzione dell'asse principale

Demo delle principali proprietà del contenitore Flex

Valori disponibili flex-Direction.:

• riga (valore predefinito): Da sinistra a destra (in RTL destro a sinistra)
• retromarcia riga. : a destra sinistra (in RTL da sinistra a destra)
• colonna. : dall'alto al basso
• colonna retromarcia. : giù

giustifica-Content - Allineamento sull'asse principale.

Proprietà CSS. giustificazione-contenuto la stessa cosa asse.

Valori disponibili giustificazione-contenuto:

• flex-start. (valore predefinito): blocchi pressati all'inizio dell'asse principale
• flex-end. : blocchi pressati fino alla fine dell'asse principale
• centro : I blocchi si trovano al centro dell'asse principale
• spazio-mezzo. : Il primo blocco si trova all'inizio dell'asse principale, l'ultimo blocco è alla fine, tutti gli altri blocchi sono distribuiti uniformemente nello spazio rimanente.
• spazio-giro. : Tutti i blocchi sono distribuiti uniformemente lungo l'asse principale, che separa ugualmente tutto lo spazio libero.

allinea gli elementi - allineamento sull'asse trasversale.

Proprietà CSS. allineamenti-elementi. Determina come gli elementi saranno allineati insieme trasversale asse.

Valori disponibili allineamenti-elementi.:

• flex-start. : blocchi pressati all'inizio dell'asse trasversale
• flex-end. : blocchi pressati fino alla fine dell'asse trasversale
• centro : I blocchi si trovano al centro dell'asse trasversale
• linea di base : I blocchi sono allineati dalla loro linea di base
• allungare. (valore predefinito) : Blocks allungato, occupando tutto disponibile nell'asse trasversale, mentre è ancora preso in considerazione min-width. / larghezza massima. Se tali sono impostati.

Proprietà CSS. flex-Direction. , Giustificare-contenuto, allineamenti-elementi. Dovrebbe essere applicato direttamente al contenitore Flex e non ai suoi elementi figlio.

Organizzazione a blocchi multilinea all'interno del contenitore Flex.

flex-wrap.

Tutti gli esempi di cui sopra sono stati costruiti tenendo conto della posizione singola (single-rolleling) dei blocchi. Va detto che per impostazione predefinita il contenitore Flex avrà sempre blocchi all'interno di sé in una riga. Ma le specifiche supportano anche la modalità multi-line. Per il multi-line all'interno del contenitore FLEX risponde con la proprietà CSS Property Flex-Wrap.

Valori disponibili flex-wrap.:

• nowRap. (valore predefinito): I blocchi si trovano in una riga da sinistra a destra (in RTL destro a sinistra)
• involucro. : I blocchi si trovano in diverse serie orizzontali (se non inserito in una riga). Si susseguono da sinistra a destra (in RTL destro a sinistra)
• wrap-reverse. : lo stesso di involucro.Ma i blocchi si trovano nell'ordine inverso.

flox-flow - Riduzione conveniente per Flex-Direction + Flex-Wrap

Infatti, flusso flessibile. Fornisce la possibilità di descrivere l'asse trasversale principale e multi-linea in una proprietà. Predefinito flox-flow: Row NowRap .

Flex_Container (Flex-Direcrion: colonna; Flex-wrap: wrap;) / * o * / .flex_container (Flox-flow: wrap;)

allinea-content.

C'è anche una proprietà allinea-content. Che determina il modo in cui le file dei blocchi risultanti saranno allineate verticalmente e come saranno fatte con l'altro tutto lo spazio del contenitore Flex.

Importante: allinea-content. funziona solo in modalità multi-line (cioè, nel caso flex-wrap: wrap; o flex-wrap: wrap-reverse;).

Valori disponibili del contenuto di allineamento:

• flex-start. : Righe di blocchi pressati all'inizio del contenitore Flex.
• flex-end. : Righe di blocchi pressati fino alla fine del contenitore Flex
• centro : Le file di blocchi si trovano al centro del contenitore Flex
• spazio-mezzo. : Il primo numero di blocchi si trova all'inizio del contenitore Flex, l'ultima serie di blocchi blocchi - Alla fine, tutte le altre righe sono distribuite uniformemente nello spazio rimanente.
• spazio-giro. : Le file dei blocchi sono distribuite uniformemente dall'inizio alla fine del contenitore Flex, separando lo spazio libero allo stesso modo.
• allungare. (valore predefinito): Righe di blocchi tesi, per occupare tutti gli spazi disponibili.

DEMO multi-line in flexbox

Regole CSS per elementi figlio del contenitore Flex (blocchi Flex)

flex-base - Dimensione base del blocco flessibile separato

Specifica le dimensioni iniziali lungo l'asse principale per il blocco Flex prima che le trasformazioni basate su altri fattori flex siano applicati ad esso. Può essere impostato in qualsiasi unità di misurazione lunga (PX, EM,%, ...) o AUTO (predefinita). Se è specificato come auto - la dimensione del blocco (larghezza, altezza) è presa come base, che, a sua volta, può dipendere dalla dimensione del contenuto, se non specificato.

flex-Grow - "avidità" prese separatamente blocco flessibile

Determina quanto un blocco flessibile separato può essere elementi più adiacenti se necessario. Flex-Grow accetta il valore senza dimensione (predefinito 0)

Esempio 1.:

• flex-cresci: 1 Quindi saranno le stesse dimensioni
• Se uno di loro ha flex-Grow: 2 Allora sarà 2 volte più di tutti gli altri

ESEMPIO 2.:

• Se tutti i blocchi Flex all'interno del contenitore Flex hanno flex-cresci: 3 , Quindi saranno le stesse dimensioni
• Se uno di loro ha flex-cresci: 12 Allora sarà 4 volte più di tutti gli altri

Quei valori assoluti flex-cresci. Non definisce la larghezza esatta. Determina il suo grado di "avidità" rispetto ad altri blocchi flessibili dello stesso livello.

flex-Shrink - "Compressibility" Factor prese separatamente blocco flex

Determina quanto il blocco flessibile diminuirà rispetto agli elementi adiacenti all'interno del contenitore Flex in caso di mancanza di spazio libero. L'impostazione predefinita è 1.

flex: ingresso breve per le proprietà Flex-Grow, Flex-Shrink e Flex-Base

Flex_block (flex-crescere: 12; flex-shrink: 3; flex base: 30em;) / * o * / .flex_block (flex: 12 3 30em;)

Demo Flex-Grow, Flex-Shrink e Flex-Basket

auto-allineamento allineato del blocco flessibile separato sull'asse trasversale.

Rende possibile sovrascrivere la proprietà del contenitore Flex allineamenti-elementi. Per un blocco flessibile separato.

Disponibile allinea i valori auto (le stesse 5 opzioni per allineamenti-elementi.)

• flex-start. : Flex-Block premuto all'inizio dell'asse trasversale
• flex-end. : Flex-Block premuto fino alla fine dell'asse trasversale
• centro : Flex-Block si trovano al centro dell'asse trasversale
• baselin. : Flex- Baseline Baseline
• allungare. (valore predefinito) : Flex-Block è allungato per prendere tutta la posizione disponibile sull'asse trasversale, mentre presi in considerazione min-width. / larghezza massima. Se tali sono impostati.

l'ordine è l'ordine del blocco Flex prese separatamente all'interno del contenitore Flex.

Per impostazione predefinita, tutti i blocchi si seguiranno nell'ordine specificato in HTML. Tuttavia, questo ordine può essere modificato utilizzando la proprietà Baseline Flex-Lineline. È definito da un numero intero e predefinito è 0.

Il valore dell'ordine non specifica la posizione assoluta dell'elemento nella sequenza. Determina il peso della posizione dell'elemento.

In questo caso, i blocchi seguiranno uno dopo l'altro lungo l'asse principale nel seguente ordine: Flex Block 5, Flex Block 1, Flex Block 3, Flex Block 4, Flex Unit 2

Demo allinea e ordine

Bootstrap ha finalmente iniziato a supportare flexbox. Bootstrap 4 flexbox sarà attivato per i seguenti componenti:

• l'intero sistema di griglie (mixins e classi predefiniti), che andrà con il galleggiante sul display: flex;
• display Form: Tabella; Display Modifica: flex;
• i componenti dei supporti guideranno la visualizzazione: tabella;

Usa FlexBox è bello!

Danny Markov.

Il design è piuttosto semplice - consiste in un contenitore allineato nel centro, all'interno della quale abbiamo un cappello, la principale partizione, pannello laterale e seminterrato. Ecco i principali "test" che dobbiamo spendere, mantenere CSS e HTML come pulito:

1. Posiziona la quattro sezione principale del layout.
2. Effettuare la pagina Adaptive (la barra laterale scende sotto il contenuto principale sulle schermate piccole).
3. Allineare il contenuto dell'intestazione - navigazione a sinistra, il pulsante a destra.

Come puoi vedere, per il sake di confronto, abbiamo lasciato tutto il più semplice possibile. Iniziamo con il primo test.

Test 1. Posizionamento delle partizioni

Soluzione su flexbox.

Aggiungi display: flex al contenitore e impostare la direzione degli elementi figlio verticalmente. Posiziona tutte le sezioni l'una nell'altra.

Contenitore (display: flex; Flex-Direction: colonna;)

Ora dobbiamo effettuare la partizione principale e la barbana laterale situata nelle vicinanze. Poiché i contenitori Flex sono solitamente unidirezionali, dobbiamo aggiungere un elemento aggiuntivo.

Quindi impostiamo questo display elemento: flex e flex-direction con la direzione opposta.

Main-and-sidebar-wrapper (display: flex; Flex-Direction: Row;)

L'ultimo passo è impostare la dimensione della partizione principale e della barra laterale. Vogliamo che il contenuto principale sia tre volte più largo dalla barra laterale, che è facile da usare con flex o percentuale.

Come puoi vedere, FlexBox ha fatto tutto bene, ma aveva anche bisogno di molte proprietà CSS più un elemento HTML aggiuntivo. Vediamo come funzionerà la griglia CSS.

Soluzione della griglia CSS.

Esistono diverse opzioni per l'utilizzo della griglia CSS, ma useremo la sintassi della Grid-Template-Areas come il più adatto ai nostri scopi.

All'inizio definiremo quattro Grid-Area, una per ogni pagina della pagina:

Intestazione (area griglia: intestazione;) .main (griglia-area: principale;) .sidebar (griglia-area: barra laterale;) piè di pagina (area griglia: piè di pagina;)

Ora possiamo configurare la nostra griglia e determinare la posizione di ogni area. Inizialmente, il codice può sembrare piuttosto difficile, ma non appena si conosce il sistema di griglia, diventa più facile per la comprensione.

Contenitore (display: griglia; / * Determinare le dimensioni e il numero di colonne della nostra griglia. L'unità FR funziona come FlexBox: le colonne sono lo spazio libero nella stringa in base ai loro valori. Avremo due colonne - i primi tre volte di più secondo. * / grid-template -Columns: 3FR 1FR; / * associamo le aree precedenti con luoghi nella griglia. La prima linea è un cappello. La seconda linea è divisa tra la partizione principale e il pannello laterale. L'ultima riga è un seminterrato. * / Grid-Template-ASTAS: "intestazione intestazione" "Sidebar principale" "Sidebar principale" "Piè di pagina"; / * L'intervallo tra le cellule della griglia sarà 60 pixel * / Grid-Gap: 60px;)

È tutto! Il nostro layout corrisponderà ora alla struttura di cui sopra e lo abbiamo impostato in modo che non dobbiamo trattare con margine o imbottitura.

Test 2. Fare la pagina Adaptive

Soluzione su flexbox.

L'esecuzione di questo passaggio è strettamente collegata al precedente. Per risolvere il flexbox, dovremo cambiare la flessione e regolare il margine.

@Media (larghezza massima: 600px) (. Main-and-sidebar-wrapper (Flex-Direction: colonna;) .main (margin-destra: 0; margine inferiore: 60px;))

La nostra pagina è abbastanza semplice, quindi c'è un piccolo lavoro nella richiesta dei media, ma molte cose dovranno rifare la grandezza.

Soluzione della griglia CSS.

Dal momento che abbiamo già identificato le aree della griglia, abbiamo solo bisogno di sovrascrivere il loro ordine nella richiesta dei media. Possiamo utilizzare le stesse impostazioni dell'altoparlante.

@Media (larghezza massima: 600 px) (.container (/ * Allineare le aree della griglia per layout mobile * / Grid-Template-aree: "Intestazione intestazione" "Main principale" "principale" Sidebar "" Footer Footer ";)))

Oppure possiamo ignorare l'intero layout da zero, se pensiamo che questa soluzione sia più pulita.

@Media (larghezza massima: 600px) (.Container (/ * Rimuovere la griglia in una layout a colonna singola * / modello griglia-modello: 1FR; Grid-Template-Aree: "Intestazione" "Main" "Sidebar" " Piè di pagina ";))

Test 3. Allineamento dei componenti del cappuccio

Soluzione su flexbox.

Pulsante.

Abbiamo già fatto un layout simile su Flexbox in uno dei nostri vecchi articoli -. La tecnica è piuttosto semplice:

Intestazione (display: flex; giustifica-contenuto: spazio-mezzo;)

Ora l'elenco di navigazione e il pulsante è allineato correttamente. Rimane solo per posizionare gli oggetti all'interno