Flex box #00: Terminologia di base

Il Flexbox layout è uno standard approvato dall’Ottobre 2017: rappresenta una delle alternative del GridLayout e viene utilizzato per distribuire e allineare gli spazi tra gli elementi contenuti in un container, anche se le misure di queste sono per la maggior parte sconosciute e dinamiche (da qui la parola flex).

L’idea maggiore dietro il layout flex è quello di dare al container l’abilità di alterare proprio le width e le height (e l’ordinamento) degli elementi per riempire lo spazio disponibile (quindi una logica applicabile a tutti gli schermi). Un container flex espande gli elementi fino a riempire lo spazio libero disponibile, o li restringe per prevenire l’overflow.

Cosa più importante, il layout flexbox ha regole più libere sulla direzione rispetto ai layout regolari (block in cui sono vertically-based e inline in cui sono horizontally-based: mentre questi lavorano bene per le pagine, hanno alcuni problemi quando vengono applicati ad applicazioni complesse (soprattutto quando l’orientamento changing, resizing, stretching, shrinking): in questo caso è meglio utilizzare un Grid Layout.

Terminologia base

Tutte queste cose devono essere racchiuse dentro un elemento contenitore, un flex container, mentre i suoi elementi all’interno devono essere considerati come dei flex-items
Il layout flex è basato sui flew-flow directions

Posso decidere di applicare la proprietà flex sia al parent (nel mio caso il .container) che ai singoli child (i vari .box). I singoli box avranno il seguente css di partenza


.box1, .box2, .box3, .box4 {
    padding-top:10px;
    padding-bottom:10px;
    width:230px;
    height:40px;
    border:2px solid red;
}

Proprietà del parent

Il comando principale classico è il display: flex


.container {
   display:flex;
}

A cui poso affidargli una direzione utilizzando la property flex-direction (i cui possibili valori sono row, row-reverse, column, column-reverse

Poi vi è possibile anche utilizzare il comando flex-wrap per uniformare al meglio gli item al suo interno (soprattutto se sono disposti su più elementi): i possibili valori sono wrap, nowrap, wrap-reverse

Poi predispongo l’allineamento degliitem con il comando align-content i cui valori sono flex-start, flex-end, center, space-between, space-around

Proprietà dei child

[coming soon][/coming soon]


We are using cookies on our website

Please confirm, if you accept our tracking cookies. You can also decline the tracking, so you can continue to visit our website without any data sent to third party services.