CSS Flex Shrink
Tra le diverse proprietà, esiste una proprietà CSS Flex che viene applicata a Flexbox. Un Flexbox è un contenitore che contiene ulteriori scatole o blocchi noti come Flex. Una proprietà Flex si occupa di flessibilità. È la proprietà che viene utilizzata per applicare lunghezze flessibili su articoli flessibili. Questa flessibilità è legata all'espansione e alla riduzione del flex. In questo articolo, vedremo la proprietà Flex Shrink per vedere la misura in cui una flessione può essere ridotta rispetto agli altri elementi nei contenitori.
L'implementazione della proprietà Flex Shrink coinvolge i codici HTML e CSS. Gli strumenti di base che sono essenziali per l'implementazione dei codici sono: un editor di testo in cui scriviamo i tag HTML e CSS e viene visualizzato un browser utilizzato per eseguire il file di testo e una pagina Web viene visualizzata. Innanzitutto, capiremo la creazione di flessioni utilizzando HTML e CSS. Qui vengono utilizzati due approcci di base del CSS: in linea o scritti all'interno dei tag HTML e il CSS interno dichiarato all'interno della porzione di testa del tag in stile CSS. È possibile accedere creando ID e classi menzionati al momento della creazione di contenuti. Allo stesso modo, la sintassi che viene fornita di seguito è scritta all'interno del tag di stile della sezione testa nel codice HTML.
Sintassi della proprietà Flex Shrink:
Flex-shrink: valore (numero);
Il "numero" è il valore che viene aggiunto alla proprietà per determinare come si restringerà l'articolo rispetto ad altri elementi. 1 è il valore predefinito di questa proprietà. Ciò significa usando 1, il restringimento alla flessione sarà zero.
Creazione Flex:
I tag HTML sono responsabili dello sviluppo del contenuto della pagina web. Nel corpo, creeremo un Flexbox che sarà progettato tramite CSS. Innanzitutto, abbiamo modificato il colore predefinito di sfondo in un effetto opzionale. Viene dichiarata una semplice intestazione. Viene creato un div per contenere il contenuto al suo interno. All'interno del Div, c'è un ulteriore presente di div che lo rende un div nidificato. Tutti questi Dichiarati interni sono stati disegnati attraverso lo stile in linea con la proprietà del colore di sfondo per aggiungere colori alla flessione. Inoltre, abbiamo anche usato semplici alfabeti come testo per nominare ogni blocco flessibile. Il Div esterno è accompagnato dalla classe CSS. Questa classe è dichiarata nel CSS e avrà alcune proprietà da applicare al Div rendendolo una Flexbox.
Codice corporeo HTML:
Tutto il div all'interno del div esterno creerà contenitori separati noti come flex. Ognuno avrà un colore diverso. L'intero codice funzionerà utilizzando CSS, come fino ad ora nell'HTML, non abbiamo fornito alcun allineamento o dimensioni al Flexbox o ai blocchi interni. Consideriamo prima il foglio di stile.
All'interno del tag di stile, ora spiegheremo tutti quegli ID dichiarati all'interno dei tag del contenuto di HTML. Poiché il tag "contenuto" viene dichiarato nel div esterno. La larghezza è data con un valore di visualizzazione che è flessibile. Questo costituirà un blocco noto come Flexbox. Ora modelleremo i blocchi interni. Il nome ID seguirà il Div interiore. Il Div interno conterrà una proprietà di base. Questa base flessibile è la distanza o l'area di un singolo flessione all'interno della scatola. Un bordo viene applicato su ogni casella con un colore indicato nel codice.
#Content Div
Flex-Basis: 240px;
Bordo: 3px Solid RGBA (0,0,0,.1);
Ogni flex avrà un'area di 240 pixel. Dopo quel tag di stile, chiudi tutti i tag inclusi il tag Head.
Codice HTML CSS:
Salva il codice nel file dell'editor di testo con estensione HTML e successivamente eseguire il file sul browser. Vedrai che una pagina web statica è formata con piccoli flessioni formate con colori e alfabeti diversi.
Produzione:
Questo viene fatto principalmente utilizzando le dimensioni della larghezza per i blocchi DIV esterni e interni per regolare. In questo modo, viene creata una semplice flessione.
Ora vedremo come si ridurrà un singolo blocco della flessione.
Flex Shrink:
La parte del corpo HTML per il restringimento Flex sarà la stessa, poiché il numero di blocchi Div nella Flexbox è lo stesso con lo stesso effetto colore e il testo che viene aggiunto ad esso. Considerando che la proprietà in stile CSS avrà un rapporto diverso per ogni area flessibile. Nel corpo HTML, ogni div interiore che provoca un flessione viene assegnato a una classe. Ogni nome di classe ha il suo effetto di proprietà che viene applicato al Div interno.
Nella porzione di testa, all'interno del tag di stile, ogni classe avrà una descrizione degli effetti che vengono applicati per causare il restringimento della flessione.
Codice corporeo HTML:
I dettagli presenti nell'ID del contenuto e del contenuto DIV saranno gli stessi che abbiamo spiegato sopra nella creazione Flex. Il Flexbox verrà fornita una larghezza appropriata e l'area flessibile è anche fornita in pixel che si applicano un bordo ad esso con lo stesso colore del flex.
Codice HTML CSS:
Alcune informazioni aggiuntive che vengono aggiunte per causare il restringimento della flessione è la spiegazione della classe. Ogni classe contiene un valore flex-shrink. Il primo blocco o il flex ha 1 valore, il secondo ha 2 e il 3 ° e il 4 ° Flex hanno questi valori di conseguenza.
.Box0
Flex-Shrink: 1;
La prima scatola ha una dimensione approssimativamente più vicina alla dimensione originale del flex. Abbiamo usato '1' per il valore che causa le dimensioni del flex senza alcun cambiamento. Noterai che le dimensioni si restringono dal 1 ° al 4 ° Flex. L'ultimo 4 ° è il più piccolo dal terzo.
Salva il codice con la modifica. Quindi, eseguire per vedere le modifiche nel browser Web. Lo vedrai mentre il flex passa dal lato sinistro a destra, la flessione continua a ridursi.
Produzione:
Conclusione
L'articolo CSS Flex Shrink è scritto per descrivere la proprietà CSS Shrink che viene applicata a Flex. Questa proprietà viene utilizzata per ridurre la flessione all'interno della Flexbox aumentando il valore della proprietà flessibile nei numeri. Per impostazione predefinita, 1 è il numero che viene utilizzato per mantenere la flessione senza alcun cambiamento. All'aumentare del numero, aumenta anche il restringimento della flessione. Innanzitutto, nell'articolo, abbiamo fornito una panoramica delle dipendenze HTML e CSS l'una dall'altra. Dopodiché, abbiamo spiegato la creazione di una semplice scatola flessibile che ha quattro flessioni al suo interno. A quel tempo, non abbiamo applicato alcuna proprietà Flex. Ma poi sullo stesso codice, abbiamo aggiunto uno stile interno per aggiungere la proprietà Flex-Shrink a ciascuna flessione del blocco.