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 order
proprietà 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-grow
proprietà 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-shrink
proprietà 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-basis
proprietà 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 flex
proprietà è 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-self
proprietà specifica l'allineamento per l'elemento selezionato all'interno del contenitore flessibile.
La align-self
proprietà sovrascrive l'allineamento predefinito impostato dalla align-items
proprietà del contenitore.
1
2
3
4
In questi esempi utilizziamo un contenitore alto 200 pixel, per dimostrare meglio la
align-self
proprietà:
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 |