CSS Tecniche Flexbox – 1 parte

Tecniche Flexbox – Parte 1 Flexbox è uno standard CSS ...

Tecniche Flexbox – Parte 1

Flexbox è uno standard CSS ottimizzato per la progettazione di interfacce utente. Utilizzando le varie proprietà di Flexbox possiamo costruire la nostra pagina partendo da piccoli elementi  che possiamo posizionare e ridimensionare senza difficoltà in qualsiasi modo desideriamo. I siti Web e le app realizzate in questo modo sono responsivi e si adattano bene a tutte le dimensioni dello schermo e dei dispositivi.

In questo prima analisi daremo un’occhiata a tre approcci Flexbox per risolvere alcuni problemi  ricorrenti  nei layout CSS .

Colonne di altezza uguale
La soluzione a questa problematica potrebbe essere quella di ipostare l’altezza minima uguale per entrambi ma una volta che la quantità di contenuti nelle colonne inizia a differire, alcuni di essi cresceranno e altri rimarranno più brevi. La risoluzione di questo problema con flexbox non potrebbe essere più semplice, poiché le colonne create in questo modo hanno uguali altezze per impostazione predefinita. Tutto quello che dobbiamo fare è inizializzare flexbox con le proprietà flex-direction  e  align-items abbiano i loro valori predefiniti.

.container {
    /* Inizializzazione flex model */
    display: flex;      
    flex-direction: row;    /* Posizionamento orizzontale elementi */
    align-items: stretch;   /* Elementi a tutta altezza */
}

Riordinamento degli elementi
Un po ‘di tempo fa, se avessimo dovuto modificare dinamicamente l’ordine di alcuni elementi, probabilmente avremmo fatto con JavaScript. Con flexbox, tuttavia, questo compito si riduce all’utilizzo di una singola proprietà CSS: order .

Order ci consente di scambiare la sequenza in cui gli elementi appaiono sullo schermo. Si tratta di un numero intero che determina la posizione di quell’elemento: i numeri più bassi indicano una priorità più alta.
La proprietà dell’ordine ha molti usi pratici ma risulta essenziale nella ricostruzione del layout per media diversi.

Centratura orizzontale e verticale
La centratura verticale nei CSS è uno di quei problemi mai veramente risolto e che presenta una quantità infinita di soluzioni diverse; ma la maggior parte per tabelle  ( che non sono progettate per creare layout ). Flexbox offre una soluzione più semplice al problema. Ogni layout flessibile ha due direzioni (asse X e asse Y) e due proprietà separate per il loro allineamento. Centrandoli entrambi possiamo posizionare qualsiasi elemento proprio nel mezzo del suo contenitore .

Kenji Agency : realizzazione  siti web a Treviso