La proprietà flex dei CSS consente di compattare le regole precedentemente studiate e cioè flex-grow, flex-shrink e flex-basis in un unico comando. Flex CSS esempio Spieghiamo dunque meglio questa proprietà con un semplice esempio. In questo esempio abbiamo un container con display flex e abbiamo inserito una certo numero di di box al suo interno. … Leggi tutto
La proprietà flex basis consente di impostare le dimensioni in lunghezza di un box. Nel caso in cui è impostato flex-direction:row, oppure se non è specificato nulla, la lunghezza si riferisce alla larghezza (width), altrimenti se flex-direction:column allora la lunghezza si riferisce all’altezza (height). flex basis valori possibili Quindi si possono indicare, come valori possibili, … Leggi tutto
La proprietà flex shrink consente di impostare il fattore di riduzione, cioè rendere semplicemente più piccolo un box contenitore rispetto ad un altro o ad altri presenti nel contenitore padre. Flex shrink valori possibili Così come per la proprietà precedente flex grow, anche in questo caso si possono indicare dei valori numerici che determinano il … Leggi tutto
La proprietà flex grow consente di impostare il fattore di ingrandimento , cioè rende semplicemente più grande un box contenitore rispetto ad un altro nel contenitore padre. Flex grow valori possibili Questa proprietà ammette un valore numerico che dunque determina l’ingrandimento del box che segue questa regola. Se tutti gli elementi hanno ad esempio la … Leggi tutto
La proprietà align content serve, come già detto, per allineare i contenitori multi-riga. In particolare ha la funzione di allineare i box flessibili sull’asse perpendicolare del contenitore. A differenza di align items, questa proprietà , distribuisce lo spazio se gli elementi sono su più linee, non ha dunque effetto se gli elementi sono distribuiti tutti su … Leggi tutto
La proprietà z-index nei CSS specifica la posizione di un elemento rispetto ad un altro. Questa proprietà è molto utilizzata nello sviluppo dei vari layout, ad esempio quando occorre scrivere su di un’immagine oppure bisogna posizionare un elemento contenitore davanti o dietro ad un altro. z-index CSS valori possibili: valori numerici: valori positivi, negativi o … Leggi tutto
La proprietà position CSS specifica il metodo utilizzato per il posizionamento di un elemento, come ad esempio un div, un titolo, ecc. Si può dunque applicare a tutti gli elementi e non è ereditata. Inoltre era una delle proprietà dei CSS più utilizzate per gestire il posizionamento degli elementi di una pagina web prima dell’avvento … Leggi tutto
La proprietà overflow dei CSS controlla i contenuti che eccedono un’area e permettono di adattarli all’elemento contenitore. Overflow CSS valori possibili I valori possibili per overflow sono: scroll – Impostando questo valore si aggiunge una barra di scorrimento. Se il contenuto non eccede l’elemento contenitore comunque si visualizza il box per le caselle di scorrimento. … Leggi tutto
La proprietà align items serve ad allineare i box flessibili sull’asse y se il contenitore ha impostato la proprietà flex-direction: row, altrimenti se ha impostato column allinea i box sull’asse x. 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. … Leggi tutto
La proprietà justify content serve ad allineare i box flessibili sull’asse principale del contenitore, cioè l’asse x se la flex-direction è row, altrimenti l’asse delle y. 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 … Leggi tutto
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, … Leggi tutto
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 … Leggi tutto
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 … Leggi tutto
Flexbox abbreviata anche con flex è una tecnologia CSS che consente di avere contenitori flessibili su cui disporre i vari elementi della pagina web. Nel corso delle lezioni successive ci soffermeremo molto su questo argomento attraverso tanti esempi pratici al fine di capirne meglio il funzionamento. Quando si costruisce un contenitore utilizzando la tecnologia flexbox … Leggi tutto
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, inline oppure inline-block. Display CSS – Elementi block Ad esempio alcuni elementi hanno valore block, cioè iniziano su una nuova linea … Leggi tutto
La proprietà box shadow nei CSS serve ad impostare delle ombreggiature agli elementi html ed è associata in particolare al tag div, ma può essere applicata anche ad altri elementi. Le ombreggiature possono essere uguali su tutti i bordi (superiore, inferiore, destro e sinistro), oppure possono essere personalizzate secondo le proprie esigenze. I valori ammissibili … Leggi tutto
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 … Leggi tutto
In questa lezione parleremo della proprietà border color dei CSS utile per assegnare il colore del bordo ai vari elementi html su uno o più lati. 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 … Leggi tutto