Esercitazione CSS

CSS CASA Introduzione CSS Sintassi CSS Selettori CSS CSS Come fare per Commenti CSS Colori CSS Sfondi CSS Confini CSS Margini CSS Imbottitura CSS Altezza/larghezza CSS Modello a scatola CSS Schema CSS Testo CSS Font CSS Icone CSS Collegamenti CSS Elenchi CSS Tabelle CSS Display CSS Larghezza massima CSS Posizione CSS Indice Z CSS Overflow CSS CSS galleggiante CSS Inline-block Allineamento CSS Combinatori CSS Pseudo-classe CSS Pseudoelemento CSS Opacità CSS Barra di navigazione CSS Menu a discesa CSS Galleria di immagini CSS Sprite di immagini CSS Selettori CSS Attr Moduli CSS Contatori CSS Layout del sito Web CSS Unità CSS Specificità CSS CSS! importante Funzioni matematiche CSS

CSS avanzato

Angoli arrotondati CSS Immagini del bordo CSS Sfondi CSS Colori CSS Parole chiave a colori CSS Gradienti CSS Ombre CSS Effetti di testo CSS Font Web CSS Trasformazioni 2D CSS Trasformazioni CSS 3D Transizioni CSS Animazioni CSS Suggerimenti CSS Immagini in stile CSS Riflessione dell'immagine CSS Adattamento agli oggetti CSS Posizione dell'oggetto CSS Mascheratura CSS Pulsanti CSS Impaginazione CSS Colonne multiple CSS Interfaccia utente CSS Variabili CSS Dimensioni della scatola CSS Query sui media CSS Esempi CSS MQ Cassetta flessibile CSS

CSS reattivo

Introduzione a RWD Vista posteriore Vista griglia RWD Query sui media RWD Immagini RWD Video RWD Quadri RWD Modelli RWD

Griglia CSS

Introduzione alla griglia Contenitore a griglia Elemento griglia

CSS SASS

Esercitazione SASS

Esempi CSS

Modelli CSS Esempi CSS css quiz Esercizi CSS Certificato CSS

Riferimenti CSS

Riferimento CSS Selettori CSS Funzioni CSS CSS di riferimento sonoro Font sicuri per il Web CSS CSS Animabile Unità CSS Convertitore CSS PX-EM Colori CSS Valori di colore CSS Valori predefiniti CSS Supporto del browser CSS

Articoli CSS Flex


Elementi figlio (elementi)

Gli elementi figlio diretti di un contenitore flessibile diventano automaticamente elementi flessibili (flessibili).

1

2

3

4

L'elemento sopra rappresenta quattro elementi flessibili blu all'interno di un contenitore flessibile grigio.

Esempio

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Le proprietà dell'elemento flessibile sono:


L'ordine Proprietà

La orderproprietà specifica l'ordine degli elementi flessibili.

1

2

3

4

Il primo elemento flessibile nel codice non deve apparire come primo elemento nel layout.

Il valore dell'ordine deve essere un numero, il valore predefinito è 0.

Esempio

La proprietà order può modificare l'ordine degli articoli flessibili:

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>


La proprietà a crescita flessibile

La flex-growproprietà specifica di quanto aumenterà un elemento flessibile rispetto al resto degli elementi flessibili.

1

2

3

Il valore deve essere un numero, il valore predefinito è 0.

Esempio

Fai in modo che il terzo elemento flessibile cresca otto volte più velocemente degli altri elementi flessibili:

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>


La proprietà flex-shrink

La flex-shrinkproprietà specifica di quanto un elemento flessibile si ridurrà rispetto al resto degli elementi flessibili.

1

2

3

4

5

6

7

8

9

10

Il valore deve essere un numero, il valore predefinito è 1.

Esempio

Non lasciare che il terzo elemento flessibile si restringa tanto quanto gli altri elementi flessibili:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>


La proprietà della base flessibile

La flex-basisproprietà specifica la lunghezza iniziale di un elemento flessibile.

1

2

3

4

Esempio

Imposta la lunghezza iniziale del terzo elemento flessibile su 200 pixel:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>


La proprietà flessibile

La flexproprietà è una proprietà abbreviata per le proprietà flex-grow, flex-shrink, e flex-basis.

Esempio

Rendi il terzo elemento flessibile non espandibile (0), non restringibile (0) e con una lunghezza iniziale di 200 pixel:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>


La proprietà align-self

La align-selfproprietà specifica l'allineamento per l'elemento selezionato all'interno del contenitore flessibile.

La align-self proprietà sovrascrive l'allineamento predefinito impostato dalla align-itemsproprietà del contenitore.

1

2

3

4

In questi esempi utilizziamo un contenitore alto 200 pixel, per dimostrare meglio la align-selfproprietà:

Esempio

Allinea il terzo elemento flessibile al centro del contenitore:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

Esempio

Allinea il secondo elemento flessibile nella parte superiore del contenitore e il terzo elemento flessibile nella parte inferiore del contenitore:

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>


Le proprietà degli elementi CSS Flexbox

La tabella seguente elenca tutte le proprietà CSS Flexbox Items:

Property Description
align-self Specifies the alignment for a flex item (overrides the flex container's align-items property)
flex A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
flex-basis Specifies the initial length of a flex item
flex-grow Specifies how much a flex item will grow relative to the rest of the flex items inside the same container
flex-shrink Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container
order Specifies the order of the flex items inside the same container