align items

align items

La proprietà align items serve ad allineare i box flessibili sull’asse perpendicolare del contenitore, cioè l’asse y. Anche questa proprietà, come le precedenti, deve essere utilizzata assieme alla proprietà display:flex, che come già spiegato serve a rendere il contenitore padre flessibile. align items valori ammissibili I valori ammissibili per questa proprietà sono: stretch, flex-start, flex-end, […]

justify content

justify content

La proprietà justify content serve ad allineare i box flessibili sull’asse principale del contenitore, cioè l’asse x. Dunque anche questa proprietà si utilizza assieme alla proprietà display:flex, che come spiegato nelle lezioni precedenti serve a rendere il contenitore genitore flessibile. justify content valori ammissibili I valori ammissibili per questa proprietà sono: flex-start, flex-end, center, space-between, […]

Flex wrap

Flex wrap

La proprietà flex wrap indica se i box all’interno del contenitore padre devono essere disposti su un’unica riga o su più righe. I valori possibili che si possono indicare sono: nowrap, wrap, wrap-reverse. Vediamoli in dettaglio e facciamo qualche esempio. Flex wrap esempi Facciamo alcuni esempi pratici per vedere come applicare questa proprietà. Anche qui, […]

Flex direction

Flex direction

La proprietà flex direction consente di specificare la direzione dell’asse principale dove si dispongono i vari box flessibili nel contenitore genitore, consente cioè di disporre gli elementi orizzontalmente oppure verticalmente. Abbiamo già elencato in linea generale questa proprietà in questa lezione introduttiva: introduzione alle flexbox css, adesso vedremo come utilizzarla attraverso vari esempi. Valori possibili […]

Flexbox CSS

Flexbox CSS

Continuiamo a parlare dei flexbox nei css ed in particolare delle proprietà dei box-flessibili. Nella precedente lezione abbiamo elencato alcune proprietà del box contenitore genitore, allego quindi il link: introduzione a flexbox, per permettere un facile ripasso. Flexbox CSS proprietà dei box-flessibili Le proprietà che si applicano ai box flessibili sono dunque: flex-grow: proprietà che […]

Flexbox

Flexbox

Le flexbox consentono di avere contenitori flessibili su cui disporre i vari elementi della pagina web. Nel corso delle lezioni successive ci soffermeremo abbastanza su questo argomento attraverso tanti esempi pratici al fine di capirne meglio il funzionamento. Quando si costruisce una flexbox in genere si imposta l’elemento padre (genitore) flessibile utilizzando la proprietà display:flex. […]

Display CSS

Display CSS

La proprietà display nei CSS è una delle più importanti per la gestione del layout degli elementi di una pagina web. Infatti ogni elemento html ha un valore di visualizzazione che può essere block o inline. Display CSS – Elementi block Ad esempio alcuni elementi hanno valore block, cioè iniziano su una nuova linea e […]

Box shadow CSS

Box shadow CSS

La proprietà box shadow nei CSS serve ad impostare delle ombreggiature agli elementi html ed è associato in particolare al tag div. Le ombreggiature, anche in questo caso, possono essere uguali per tutti i bordi (superiore, inferiore, destro e sinistro), oppure possono essere personalizzati secondo le proprie esigenze. I valori ammissibili sono i pixel oppure […]

border radius css

Border radius CSS

In questa lezione parleremo della proprietà border radius nei CSS, cioè della proprietà che consente di arrotondare i bordi degli elementi. Come con le altre proprietà è possibile dare lo stesso arrotondamento per tutti gli angoli oppure personalizzare ciascuno di loro. Border radius CSS esempi Ecco dunque un semplice esempio di utilizzo della proprietà border […]

Border color CSS

Border color CSS

In questa lezione parleremo della proprietà border color dei CSS, cioè di come impostare un colore di bordo per i vari elementi html. Nelle lezioni precedenti abbiamo già visto come impostare una larghezza del bordo ed uno stile. Vi indico i link per chi volesse consultare i tutorial: come impostare la larghezza di un bordo; […]