CSS Flex krympe
Blant flere egenskaper eksisterer det en Flex CSS -egenskap som brukes på Flexbox. En flexbox er en beholder som inneholder ytterligere bokser eller blokker kjent som flex. En flex -eiendom omhandler fleksibilitet. Det er eiendommen som brukes til å bruke fleksible lengder på fleksible gjenstander. Denne fleksibiliteten er relatert til å utvide og krympe flex. I denne artikkelen vil vi se flex -krympeegenskapen for å se i hvilken grad en flex kan krympet i sammenligning med de andre elementene i containerne.
Implementering av Flex Shrink -egenskapen involverer HTML- og CSS -koder. De grunnleggende verktøyene som er viktige for implementering av kodene er: en tekstredigerer der vi skriver HTML- og CSS -kodene, og en nettleser som brukes til å utføre tekstfilen og en webside vises. Først vil vi forstå flex -opprettelsen ved å bruke HTML og CSS. To grunnleggende tilnærminger til CSS brukes her: inline eller skrevet inne i HTML -taggene og den interne CSS som er erklært inne i hodedelen av CSS -stilkoden. De kan nås ved å lage ID -er og klasser som er nevnt på tidspunktet for innholdsoppretting. Tilsvarende er syntaksen som er gitt nedenfor skrevet i stilkoden til hodeseksjonen i HTML -koden.
Syntaks for Flex Shrink -egenskapen:
Flex-shrink: verdi (tall);
Antallet 'er verdien som legges til eiendommen for å bestemme hvordan varen vil krympe sammenlignet med andre varer. 1 er standardverdien for denne egenskapen. Dette betyr ved å bruke 1, krympet til flex vil være null.
Flex Creation:
HTML -tagger er ansvarlige for å utvikle innholdet på nettsiden. I kroppen vil vi lage en flexbox som vil bli designet gjennom CSS. Først har vi endret bakgrunnsstandardfargen til en valgfri effekt. En enkel overskrift erklært. En div er opprettet for å inneholde innholdet inne i det. Inne i diven er det en videre div til stede som gjør det til en nestet div. Alle disse innvendige erklærte div er stylet gjennom inline styling med bakgrunnsfargeegenskaper for å legge til farger i flex. Dessuten har vi også brukt enkle alfabeter som tekst for å navngi hver flexblokk. Den ytre div er ledsaget av CSS -klassen. Denne klassen er erklært i CSS og vil ha noen egenskaper som skal brukes på div, noe som gjør det til en flexbox.
HTML Body Code:
All div inne i den ytre div vil lage separate containere kjent som flex. Hver vil ha en annen farge. Hele koden vil fungere ved å bruke CSS, som nå i HTML, har vi ikke gitt noen justering eller dimensjoner til Flexbox eller de indre blokker også. La oss vurdere stilarket først.
Inne i stilmerket vil vi nå forklare alle IDene som ble erklært inne i taggene til HTML -innholdet. Som "innhold" -merket er erklært i Outer Div. Bredde er gitt med en visningsverdi som er flex. Dette vil danne en blokk kjent som Flexbox. Nå vil vi style de indre blokkene. ID -navnet vil følge den indre div. Den indre div vil inneholde en baseegenskap. Denne flex-basen er avstanden eller området til en enkelt flex inne i boksen. En grense brukes på hver boks med en farge gitt i koden.
#Content Div
Flex-BASIS: 240px;
Border: 3px solid RGBA (0,0,0,.1);
Hver flex vil ha et område på 240 piksler. Etter den stilmerker, lukk alle taggene inkludert hodemerket.
HTML CSS -kode:
Lagre koden i Text Editor -filen med HTML -utvidelse og utfør etter filen på nettleseren. Du vil se at en statisk webside er dannet med små flexer dannet med forskjellige farger og alfabeter.
Produksjon:
Dette gjøres hovedsakelig ved å bruke breddedimensjonene til det ytre og de indre divblokkene for å bli justert. På denne måten opprettes en enkel flex.
Nå får vi se hvordan en enkelt blokk av flex vil krympe.
Flex krympe:
HTML -kroppsdelen for flex -krympingen vil være den samme, som antall DIV -blokker i Flexbox er den samme med samme fargeeffekt og teksten som blir lagt til den. Mens CSS -stilegenskapen vil ha et annet forhold for hvert flex -område. I HTML -kroppen blir hver indre div som forårsaker en flex tildelt en klasse. Hvert klassenavn har sin eiendomseffekt som brukes på den indre div.
I hodedelen, inne i stilmerket, vil hver klasse ha en beskrivelse av effektene som brukes for å forårsake flex krympe.
HTML Body Code:
Detaljene som er til stede under ID for innhold og DIV -innhold vil være de samme som vi har forklart ovenfor i Flex Creation. Flexboxen vil få en passende bredde, og flex -området er også gitt i piksler som bruker en kant på den med samme farge på flex.
HTML CSS -kode:
Noe ekstra informasjon som legges til for å forårsake flex -krympingen er forklaringen på klassen. Hver klasse inneholder en flex-shrink-verdi. Den første blokken eller flex har 1 verdi, den andre har 2, og 3. og fjerde flex har disse verdiene tilsvarende.
.Box0
Flex-Shrink: 1;
Den første boksen har en størrelse omtrent nærmere den opprinnelige størrelsen på flex. Vi har brukt '1' til verdien som forårsaker størrelsen på flex uten endring. Du vil merke at størrelsen vil krympe fra 1. til 4. flex. Den siste fjerde er den minste fra den tredje.
Lagre koden med endringen. Utfør deretter for å se endringene i nettleseren. Du vil se at når flex går fra venstre side til høyre, går flexen på å krympe.
Produksjon:
Konklusjon
CSS Flex Shrink -artikkel er skrevet for å beskrive CSS -krympegenskapen som brukes på flex. Denne egenskapen brukes til å krympe flexen inne i flexboxen ved å øke Flex -egenskapen i antall. Som standard er 1 nummeret som brukes til å holde flex uten endring. Når antallet øker, øker også krympingen av flex. For det første ga vi i artikkelen en oversikt over HTML- og CSS -avhengigheter av hverandre. Etter det forklarte vi opprettelsen av en enkel flex -boks med fire bøyer inni den. På den tiden brukte vi ikke noen Flex -eiendom. Men så på samme kode la vi til en intern styling for å legge til flex-shrink-egenskapen til hver flex av blokken.