Sintesi della lezione
float
- Un elemento di tipo blocco (display:block) interrompe il flusso naturale della pagina anche se non ne occupa tutta la larghezza. Le proprietà float consente agli elementi che seguono l'elemento blocco di affiancarsi all'elemento stesso, a destra o a sinistra se lo spazio rimanente nella pagina lo consente.
- Il valore di float può essere:
- left: L'elemento si colloca a sinistra nella pagina e gli elementi che seguono lo affiancano a destra.
- right: L'elemento si colloca a destra nella pagina e gli elementi che seguono lo affiancano a sinistra.
- none: (valore di default) l'elemento non consente il float.
img {
float : right;
margin: 0 0 15px 15px;
}
clear
- Le proprietà clear consente di interrompere il flusso float
- Il valore di clear può essere:
- left: Interrompe il float a sinistra.
- right: Interrompe il float a destra.
- both: Interrompe il float sia sinistra che a destra .
div.clear {
float : none;
clear: both;
}
.clearfix
- Spesso è un problema interrompere correttamente il flusso float se gli elementi non sono della stessa altezza. In rete si trova questo trucco. Assegnando la classe clearfix ad un elemento che contiene elementi float il flusso si chiude correttamente..
.clearfix::after {
content: "";
clear: both;
display: table;
}
Proprietà per il flex-container
#display
Per definire un elemento come contenitore di un layout di tipo flex bisogna settare la sua prorpietà display come flex o inline-flex. Tu i sui discendenti diretti (children) saranno trattati come elementi flex.
.container {
display: flex; /* or inline-flex */
}
#flex-direction
Definisce l'asse principale, definendo così la direzione secondo la quale gli elementi flex vengono inseriti nel contenitore: righe (orizzontalmente) o colonne (verticalalmente) e in quale verso.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
row(impostazione predefinita): da sinistra a destra in ltr ; da destra a sinistra inrtlrow-reverse: da destra a sinistra in ltr ; da sinistra a destra inrtlcolumn: come row ma dall'alto in bassocolumn-reverse: come row-reverse ma basso verso l'alto
#flex-wrap
Per impostazione predefinita, gli elemnti flex verranno collocati su un'unica linea. Si può consentire gli elementi eseguire il wrapping (andare a capo) se manca lo spazio.
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap(impostazione predefinita): tutti gli elementi flex saranno su una sola rigawrap: se manca spazio gli elementi flex si disposrranno su più righe, dall'alto in basso.wrap-reverse: se manca spazio gli elementi flex si disposrranno su più righe, dal basso all'alto.
Guarda Esempio flex-wrap di Bruno Migliaretti su CodePen.
#flex-flow
Si tratta di una forma abbreviata per settare le propriettà flex-direction e flex-wrap insieme. Il valore predefinito è row nowrap .
.contaner {
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
}
#justify-content
Definisce l'allineamento lungo l'asse principale. Aiuta a distribuire lo spazio extra gratis lasciato quando entrambi tutti gli elementi di flessione su una riga sono inflessibili, o sono flessibili ma hanno raggiunto la loro dimensione massima. Esercita anche un certo controllo sull'allineamento degli elementi quando essi overflow la linea.
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
flex-start(impostazione predefinita): se flex-direction è row gli elementi sono accostati l'uno all'atro a sinistra flex-end: se flex-direction è row gli elementi sono accostati l'uno all'atro a destracenter: gli elementi sono accostati l'uno all'atro al centrospace-between: gli elementi sono distribuiti uniformemente; se flex-direction è row il primo elemento è accostato a sinistra a, l'ultimo a destra.space-around: gli elementi sono distribuiti uniformemente con uguale spazio intorno a loro. Si noti che visivamente gli spazi non sono uguali, poiché tutti gli elementi hanno uguale spazio su entrambi i lati. Il primo elemento avrà una sola unità di spazio dal bordo del contenitore, ma due unità di spazio dall'elemento successivo.space-evenly: gli elementi sono distribuiti in modo che la distanza tra gli elementi e la distanza dai bordi sia uguale.
#align-items
Questo definisce il comportamento predefinito per come flex, gli elementi vengono disposti lungo l'asse trasversale sulla riga corrente. Pensate a come il justify-content versione per l'asse trasversale (perpendicolare all'asse della conduttura).
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start: bordo di croce-inizio margine degli elementi è posto sulla linea di croce-partenzaflex-end: bordo di croce-fine margine degli elementi è posto sulla croce-fine lineacenter: gli elementi sono centrati nell'asse trasversalebaseline: gli elementi sono allineati come allineare le loro linee di basestretch(impostazione predefinita): tratto per riempire il contenitore (ancora rispetto min-Larghezza/max-width)
#align-content
Questo allinea le linee di un contenitore di flex all'interno quando c'è spazio extra nell'asse trasversale, simile a come justify-content Allinea i singoli elementi all'interno dell'asse principale.
Nota: questa proprietà non ha effetto quando c'è solo una linea di elementi di flex.
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start: pranzo di linee all'inizio del contenitoreflex-end: pranzo di linee alla fine del contenitorecenter: linee pranzo al centro del contenitorespace-between: linee distribuite in modo uniforme; la prima riga è all'inizio del contenitore mentre l'ultimo è alla finespace-around: linee distribuite in modo uniforme con uguale spazio intorno ogni rigastretch(impostazione predefinita): linee tratto per occupare lo spazio rimanente
Proprietà per i flex-item
order
Per impostazione predefinita gli elementi flex vengono disposti nell'ordine in cui appaiono del codice HTML. La proprietà order modifica questo comportamento.
.item {
order: <integer>; /* default is 0 */
}
flex-grow
Definisce il tasso di crescita di un elemento flex rispetta agli altri nell'occupazione dell spazio disponibile nel contenitore. Accetta un valore intero o decimale che funziona come una percentuale.
Se tutti gli elementi hanno flex-grow impostato su 1, lo spazio disponibile nel contenitore sarà equamente distribuito tra tutti gli elementi. Se uno degli elementi ha flex-grow impostato a 2, occuperà (se lo spazio disponibile lo consente) il doppio dello spazio occupato dagli altri.
.item {
flex-grow: <number>; /* default 0 */
}
I numeri negativi non sono validi.
flex-shrink
Funzione come flex-grow ma definisce il tasso di riduzione dello spazio occupato.
.item {
flex-shrink: <number>; /* default 1 */
}
I numeri negativi non sono validi.
flex-basis
Definisce la dimensione predefinita di un elemento prima che lo spazio disponibile nel contenitore venga distribuito. Può essere una misura (ad esempio 20%, 5rem, ecc.) o la parola chiave auto.
.item {
flex-basis: <length> | auto; /* default auto */
}
Se impostata su auto , lo spazio disponibile viene distribuito basato al valore di flex-grow.
flex #
Consente di impostare in un unica soluzione le proprietà flex-grow, flex-shrink e flex-basis. Il secondo e il terzo parametro ( flex-shrink e flex-basis ) sono facoltativi. Valore predefinito è 0 1 auto .
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Si consiglia di utilizzare questa proprietà a sintassi abbreviata anziché impostare le singole proprietà. I browser elaborano meglio l'istruzione e correggono automaticamente eventuali incongruenze..
align-self
Consente di modificare l'impostazione definita da align-items per singoli elementi flex.
I valori utilizzabili sono gli stessi di align-items
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Si noti che float , clear e vertical-align non hanno alcun effetto su un elemento di flex.
Pagine create durante la lezione