Proprietà di elementi Flexbox in CSS | Spiegato
Questo articolo ti aiuterà a comprendere gli aspetti di seguito degli elementi CSS Flexbox:
- Elementi Flexbox in CSS
- Proprietà di elementi Flexbox in CSS
- Come implementare le proprietà degli articoli Flexbox in CSS
Quindi, iniziamo!
Elementi Flexbox in CSS
Durante la creazione del contenitore Flex in Flexbox, utilizziamo la proprietà del display e ci assegniamo un certo valore, come Flex, Inline. A quel tempo, il figlio diretto di quel contenitore Flex diventa l'oggetto flessibile. La figura indicata di seguito fornirà una migliore comprensione:
Proprietà di elementi Flexbox in CSS
La tabella seguente ti fornirà una breve panoramica delle proprietà Flexbox:
| Proprietà | Descrizione |
|---|---|
| ordine | Controlla l'ordine degli elementi figlio all'interno del contenitore Flex. |
| Flex-Crow | Determina il fattore di crescita per un elemento flessibile. |
| Flex-Shrink | Determina il fattore di restringimento per un elemento figlio/elemento flessibile. |
| Flex-Basis | Determina la dimensione iniziale di un elemento figlio/elemento flessibile. |
| flettere | È una proprietà stenografica per tre proprietà flex-grow, flex-shrink e flex-basis. |
| allinearsi | Consente di allineare predefinito (lungo l'asse incrociato) di essere sovrascritto per i singoli elementi del bambino/elementi flessibili. |
Come implementare le proprietà degli articoli Flexbox in CSS
In questa sezione, discuteremo di ogni proprietà Flexbox sopra menzionata e implementeremo praticamente per una profonda comprensione:
Esempio 1: Proprietà dell'ordine CSS
Ci vuole un valore numerico per ordinare gli elementi in un ordine specifico. Lo snippet di codice seguente ti permetterà di capire come funziona la proprietà dell'ordine in una Flexbox:
Proprietà dell'ordine
Primo elemento
Secondo articolo
Terzo elemento
Quarto articolo
Quinto elemento
Nel frammento di codice sopra, abbiamo utilizzato la proprietà dell'ordine per organizzare gli elementi Flexbox in base alla nostra scelta:
L'output mostra che la proprietà dell'ordine ha organizzato gli elementi Flex in base all'ordine specificato dall'utente.
Esempio 2: proprietà CSS Flex-Grow
Prende un valore numerico che rappresenta la velocità con cui un elemento flessibile crescerà rispetto agli altri elementi flessibili. Per la chiarezza dei concetti, consideriamo il pezzo di codice seguente:
Proprietà a crescita flessibile
Primo elemento
Secondo articolo
Terzo elemento
Quarto articolo
Quinto elemento
In questo esempio, il valore predefinito per la proprietà Flex-Crow è 0, quindi ogni elemento del contenitore crescerà di conseguenza. Tuttavia, il secondo e il quarto elemento del contenitore cresceranno dodici volte più velocemente rispetto ad altri articoli perché questi due elementi hanno specificato il valore della proprietà flessibile come 12:
Lo snippet sopra ha verificato il funzionamento della proprietà flessibile.
Esempio 3: proprietà CSS Flex-Basis
Nel frammento di codice seguente, implementeremo la proprietà Flex-Basis per impostare le dimensioni del secondo e quarto elemento del contenitore:
Proprietà Flex-Basis
Primo elemento
Secondo articolo
Terzo elemento
Quarto articolo
Quinto elemento
Impostiamo il valore della proprietà Flex-Basis come 150px per il secondo e il quarto elementi. Il codice sopra genere genererà il seguente output:
Allo stesso modo, possiamo utilizzare le altre proprietà degli articoli Flexbox per ottenere diverse funzionalità.
Conclusione
Il contenitore Flex o l'elemento genitore è una scatola/contenitore che contiene più elementi flessibili, mentre tutto all'interno di un contenitore Flexbox è chiamato elemento Flexbox o elemento figlio. Per creare il contenitore Flex in Flexbox, utilizziamo la proprietà del display e lo assegniamo valore flessibile o in linea; Di conseguenza, il figlio diretto di quel contenitore Flex diventa l'oggetto flessibile. In CSS, sono disponibili diverse proprietà per lavorare con elementi Flexbox, come i controlli dell'ordine l'ordine degli articoli Flexbox, Flex-Crow determina il fattore di crescita per gli articoli Flex, ecc. Questo articolo ha coperto diverse proprietà degli articoli Flexbox e ha spiegato come usarle per raggiungere le loro funzionalità.