Flexbox, breve guida pratica

by Silvia Mazzetta Date: 23-05-2020 css css3 design webdesign flexbox

In questo articolo impareremo a gestire gli elementi del nostro sito web in modo più efficiente ed efficace, grazie alla proprietà Flexbox.

Ma attenzione, non stiamo parlando di una semplice proprietà css, ma di un insieme di esse, che ci permetterà di organizzare, allineare e distribuire lo spazio degli elementi nel loro elemento contenitore, anche se non ne specifichiamo le dimensioni o sono dinamiche.

 

CSS FLEXBOX

 

Come già sappiamo, la proprietà Flexbox ci fornisce un modo efficiente per allineare e distribuire lo spazio tra gli elementi di una pagina.


 

Per lavorare con flexBox dobbiamo definire un elemento padre ( flex container) che ovviamente avrà una larghezza (asse principale) e un altezza (asse perpendicolare). L'elemento padre, a sua volta, conterrà gli elementi flessibili (flex items).

Possiamo facilmente implementare il modello Flexbox attraverso la proprietà display con valore flex o inline-flex.

In seguito, mostreremo un esempio di un div padre, la cui classe è flex-container, cui applicheremo la proprietá flex.

 
 

PROPRIETÀ CHE CONTROLLANO LA DIREZIONE /FLUSSO DEGLI ELEMENTI

 

FLEX-DIRECTION:

flex-direction: row; allinea orizzontalmente gli elementi da sinistra a destra.

flex-direction: row-reverse; allinea orizzontalmente gli elementi da destra a sinistra

flex-direction: column; allinea verticalmente gli elementi dall'alto verso il basso

flex-direction: column-reverse; allinea verticalmente gli elementi dal basso verso l'alto

FLEX-WRAP:

flex-wrap: wrap; specifica se gli elementi flessibili devono scorrere o meno sull'asse y.

flex-wrap: wrap-reverse; gli elementi flessibili scorrono in ordine inverso;

FLEX-FLOW:

flex-flow: row wrap; La proprietà flex-flow è una proprietà abbreviata. Indica flex-direction e flex-wrap.

 

PROPRIETÁ CHE CONTROLLANO L'ALLINEAMENTO

 

JUSTIFY CONTENT:

La proprietà "justify-content" viene utilizzata per allineare gli elementi flessibili sull'asse principale.

justify-content: center ; centra gli elmenti del contenitore.

justify-content: flex-start; Allinea gli elementi al principio del contenitore. È il valore per difetto.

justify-content: flex-end; Allinea gli elementi alla fine del contenitore.

justify-content: space-around; mostra gli elementi flessibili con uno spazio intorno.(prima-dopo e tra di loro)

justify-content: space-between; mostra gli elementi flessibili con uno spazio tra di loro.

 

ALLINEAMENTO VERTICALE

 

L'allineamento verticale avviene per il cosiddetto "asse perpendicolare", e per questo abbiamo tre diverse proprietà, "align-items", "align-self" e "align-content". Ecco che arriva il problema, perché se non si capisce il concetto si ottengono spesso risultati inaspettati. Vediamo cosa ci dice il W3C su queste proprietà:

  •  “align-items” : imposta l'allineamento predefinito per tutti gli elementi del contenitore, compresi gli elementi indipendenti.
  •  “align-self” : permette di allineare elementi indipendenti del contenitore.
  •  “align-content”:  allinea le linee/file di elementi in un contenitore.
 

LA PROPRIETÀ ALIGN-ITEMS

 

Questa proprietà è simile a justify-content, ma la differenza è l'asse lungo la quale funziona. Per capire meglio, bisogna cercare di rimuovere la proprietà che definisce l'altezza degli elementi figlio, e aumentare quella dell'elemento genitore:

align-items: center; centra gli elementi lungo l'asse.

 
.flex-container {
display: flex;
background-color:#678888;
height: 500px;
flex-flow:row wrap;
align-items:center;
}
.flex-container > div {
background-color: #f1f1f1;
padding:10px;
margin:10px;
width:100px;
height:100px;}
 

align-items: flex-start allinea verticalmente gli elementi flessibili nella parte superiore del contenitore in modo che gli elementi siano posizionati dall'inizio del contenitore, cioè lungo l'asse perpendicolare. . Influisce anche sul valore della "flex-direction" rispetto alla direzione dell'allineamento verticale.

 
.flex-container {
height: 300px;
display::flex;
flex-flow: row wrap;
align-items: flex-start;
background: #000fff;
}
.flex-container div {
width: 21%;
background: grey;
margin: 10px;
}
 

align-items: flex-end allinea i div flessibili nella parte inferiore contenitore lungo l'asse perpendicolare

align-items: stretch: gli elementi flessibili si estendono andando a riempire il contenitore (è il valore predefinito)

 
.flex-container{
display:flex;
flex-flow:row wrap;
justify-content:flex-start;
align-items:stretch;
background:red;
}
.flex-container > div{
width:21%;
background:grey;
margin:10px;
height:500px;
}
 

align-items: baseline. allinea verticalmente le linee "base" degli elementi lungo l'asse perpendicolare del contenitore. Per capire questo esempio, aggiungiamo alcuni stili agli elementi. Per rendere evidente la differenza, aumentiamo la dimensione del carattere del primo elemento.

.flex-container {
display: flex;
align-items: baseline;
background-color: blue;
}
.flex-container div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.flex-container div:first-child  {
font-size: 80px;
background: orange;
}
<div class="flex-container">
<div><h1>1</h1></div>
<div><h6>2</h6></div>
<div><h3>3</h3></div> 
<div><small>4</small></div> 
</div>
 

LA PROPRIETÁ ALIGN CONTENT

 

Gestisce le modalità di allineamento degli elementi all'interno del contenitore, con linee multiple. La differenza con align-items è che il primo allinea gli elementi mentre align-content allinea le righe quando c'è spazio extra sull'asse perpendicolare. Inoltre, align-self allinea gli elementi in modo indipendente.

align-content: space-around; distribuisce le linee lungo l'asse perpendicolare, in maniera equidistante;

align-content: stretch; estende le linee per occupare l'intero asse perpendicolare..

align-content:center ; allinea al centro dell'asse.

align-content: flex-start; allinea gli elementi lungo l'inizio dell'asse perpendicolare.

align-content: flex-end; allineare gli elementi lungo l'estremità dell'asse perpendicolare.

align-content: between; Distribuisce le linee lungo l'asse perpendicolare dall'inizio alla fine

 

COME CENTRARE PERFETTAMENTE UN DIV?

 
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: blue;
}
.flex-container div {
background-color: #f1f1f1;
color: white;
width: 100px;
height: 100px;
}
<div class="flex-container">
<div></div>
</div>

 

Comprendere le differenze tra align-items y align content




 

Le proprietà Flexbox più curiose e interessanti

 

Finora abbiamo visto proprietà che influenzano la direzione, l'allineamento e la dimensione di elementi, righe e colonne in un contenitore Flexbox. Ora vedremo delle proprietà impressionanti, poiché con esse possiamo modificare gli elementi in modo indipendente.

 

order:

Tra queste proprietà c' è "order", con la quale possiamo modificare l'ordine degli elementi flessibili con una semplice istruzione.

Con l'esempio seguente possiamo capire meglio il funzionamento di questa proprietà



 
 

Attenzione: l'ordine dipende in ultima analisi dalla direzione degli elementi all'interno del contenitore flex (stabilito con flex-direction, flex-wrap o flex-flow).

 

flex:

 

 flex: none | <flex-grow> <flex-shrink> <flex-basis>

 
 

flex-grow: consente di impostare il fattore di ingrandimento di un box rispetto agli altri presenti nel contenitore quando si distribuisce lo spazio disponbile;

flex-shrink: è la proprietà opposta rispetto a flex-grow, dal momento che agisce sul fattore di restringimento relativo tra i box;

flex-basis: consente di specificare la dimensione principale (main size) iniziale (in valori assoluti o in percentuale) di un box;

 

UNA NAVBAR CON FLEXBOX

 
 

CARDS EN FLEXBOX

 
 





Background vector created by freepik - www.freepik.com
 
by Silvia Mazzetta Date: 23-05-2020 css css3 design webdesign flexbox visite : 6098  
 
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 9 years old geek, founder of  @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple  years of website design expertise behind her.  She turns conceptual ideas into highly creative visual digital products. 

 
 
 

Articoli correlati

Nuove unità grafiche della finestra - CSS

'Intercop 2022" è un progetto annunciato da Google, Microsoft, Apple e Mozzilla Foundation per far sì che tutti i browser offrano la stessa esperienza web. Il progetto ha 15 aree di…

Come funziona il GAP in CSS Grid e flexbox

Forse conoscete già la proprietà CSS gap. Non è esattamente una novità, ma l'anno scorso ha acquisito un'importante capacità: ora funziona in Flexbox oltre che in CSS Grid. Questo, e…

Introduzione alle CSS Container Queries

Il responsive web design è una componente essenziale dello sviluppo web. Come sviluppatori front-end, dobbiamo preoccuparci continuamente della moltitudine di nuove risoluzioni e dispositivi. Va da se che creare una versione…

Java Design Pattern: Prototype Pattern

Andremo ora a parlare di un pattern creazionale che ci permette di "copiare con classe". Sì, anche se sembra strano, il compito fondamentale di questo pattern è copiare. Sto parlando…

Java Design Pattern: Builder Pattern

Andiamo oggi a parlare di un pattern creazionale che in molte situazioni può rappresentare una valida alternativa alla costruzione di oggetti mediante costruttori: il Builder Pattern. La necessità di introdurre meccanismi…

Java Design Pattern: Factory Pattern

Continuando il discorso sui design pattern iniziato precedentemente, andiamo oggi a vedere un altro pattern molto utilizzato: il Factory Method Pattern. Il GoF (Gang of Four Design Patterns) lo definisce così: Definisce…

Java: Introduzione ai design pattern: Singleton

Chiunque abbia anche una minima esperienza di programmazione, si sarà reso conto di come i problemi sianoricorrenti. Infatti troviamo spesso problemi con uno stesso pattern ma con contesti differenti. Ad esempio, un…

Paesaggi Parallax costruiti interamente con CSS e HTML

Il CSS3 ha messo finalmente fine alle nostre frustrazioni: con delle semplici proprietà si aprono infatti infinite soluzioni. Una tra tante, la possibilità di inserire uno sfondo animato in una pagina…

9 Utili Librerie CSS per il Disegno Web

I componenti perduti di bootstrap, un complemento che sicuramente non dovrete mai farvi mancare!  Jasny Bootstrap E se il vostro framework CSS parlasse? Ecco a voi un nuovo Framework Semantico.Un…

Introduzione all'animazione dei poligoni con css

Per lungo tempo noi sviluppatori web, abbiamo dovuto rassegnarci alle strutture geometriche fondamentali: i blocchi rettangolari. Cosí, quando è stato introdoto il clipping nei css, abbiamo gioito. Dite la verità... Ma cos'è…

Flat UI Design - 8 siti ai quali ispirarsi

In questo post vi proproniamo una collezione di flat template professionali, perfetti per realizzare siti dal design semplice, pulito ma al tempo stesso accattivante. Brewery O come fare bella figura con un amico invitandolo a…

CSS: la funzione Calc()

Nella progettazione di un sito web responsive, dobbiamo tener conto della ormai grande varietà di dispositivi sui quali sarà visualizzato il nostro lavoro e delle rispettive variazioni di risoluzioni alle…

Clicky