CSS Flex Order

En flexbox eller element brukes til å inneholde HTML -innhold i den. En CSS Flex -egenskap brukes til å anvende effekten av fleksible lengder på fleksible gjenstander. Et kaskaderende stilark tilbyr ordens eiendom som brukes til å arrangere flex -varene. For å bruke ordreegenskapen, skal gjenstandene inne i Flexbox være fleksible. Ellers vil ikke eiendommen bli berørt.

Flex oppretting og bestilling

I dette eksemplet har vi brukt en enkel div for å legge til ytterligere div i det, og skape et hekkende divfenomen. Den ytre div er kjent som en flexbox til flere innhold i den. Deres ytre div er hoveddiven som bærer flere divs inni den. Det er erklært med en CSS -klasse for å bruke noen CSS -effekter på den. Denne klassen er beskrevet i hodeseksjonen med stilkoden ved å danne en intern CSS.

Inne. Hver div henviste til singel flex. Vi vil legge til inline styling her for å legge til farge til hver flex. Hver div blir også ytterligere underholdt med CSS -ID -ene. Disse alle ID -ene er ansvarlige for å anvende alle effekter på flex som er ordnet i en passende rekkefølge.

CSS IDS og klasse

På dette tidspunktet er det nødvendig å utdype disse to terminologiene til CSS. Når vi diskuterer CSS -egenskapene som blir påvirket, spiller disse ID -ene og klassene en essensiell rolle i å anvende noen effekt på HTML -innholdet. Hver gang vi snakker om interne og eksterne CSS, kommer vi over ID -er og klasser. Disse IDene og klassene har farge, tekststil, dimensjoner og mange andre effekter på innholdet erklært i kroppsseksjonen. For å få tilgang til disse effektene fra klasser og ID -er, må vi nevne at de er navngitt i innholdskoden, akkurat som "one" ID. Og alle ID -ene fra første til fjerde er også erklært.

Når vi kommer tilbake til HTML -koden, her med hver interne div eller flex, har vi også brukt teksten som vil vise ordren tydeligere. Dette skjer når setningen dannes ved å ordne flex i riktig rekkefølge. Bestillingsretningen til flex er brukerens valg. Vi kan nummerere flex tilfeldig. Disse flexboxene dannes når CSS -stylingen brukes på dem. La oss nå vurdere CSS -koden.

Vi vil først erklære IDen som tilhører den ytre div inne i stilkoden. Denne DIV vil spesifisere området der alle indre divene dannes. Vi vil legge til bredde, høyde og grenseegenskaper til denne IDen. En viktig funksjon som brukes til å danne en flex er "display" -effekten. Fordi denne egenskapen er fjernet, vil enkle rektangler bli dannet på websiden. Disse bøyene vil bli dannet ved å bruke denne displayegenskapen:

#en
Display: Flex;

Flex dannes vanligvis i horisontal retning fra venstre mot høyre. OK, dette var for den ytre div. For å legge til dimensjoner til all indre div eller flex, vil vi bruke ID "en" med div. Disse egenskapene inkluderer bredden og høyden på en enkelt blokk eller flex. Høyden på den enkelt indre div er lik høyden på den ytre div. Mens bredden på den ytre div er delt inn i alle fire indre divs. Dette gjøres ved å erklære ID-beskrivelsen på nytt av hver flex inne i taggen med de forskjellige ID-navnene for hver flex. Hvert DIV -navn er gitt i henhold til ordren. For eksempel inneholder den første div ordren som 1. Det spiller ingen rolle i hvilken rekkefølge du erklærer koden i CSS eller HTML, men ordrenummeret vil avgjøre rekkefølgen på hver flex.

Div#først
Bestilling: 1

Lukk alle taggene. Lagre koden med HTML -utvidelsen for å åpne den som tekst og en webside.

På utførelsen, inne i nettleseren, vil du se at rekkefølgen du har definert hver indre div eller flex vises med blokkene i respektive farger, noe som gjør flex i riktig rekkefølge. Dessuten skildrer teksten som er lagt til med hver indre div -tagge at setningen dannes ved å ordne flex i orden. Dette viser at ordren vi har nevnt følges nøyaktig.

Omvendt rekkefølge av flex

Med Flexbox og Flex -oppretting er det synlig at det ikke er behov for å nevne noen flex flyt i koden. Som standard er flexstrømmen i horisontal retning, og ordren følges på samme måte som den er beskrevet, det vil si som standard stigende rekkefølge. Men når du først har erklært rekkefølgen på flex i flex -opprettelsen, kan du snu den ved å nevne retningen på flex.

#en
Flex-retning: rad-reverse;

Denne egenskapen legges til flexbox eller den ytre div, da den er ansvarlig for å inneholde indre bøyninger inni den. Og hvis du vil bruke standardordren, må du fjerne denne retningsegenskapen fullstendig eller legge til flex-retningen som "rad". Det vil gjøre den stigende ordenen igjen.

Ved utførelsen vil du se at all rekkefølgen på flex er omgjort, du kan se tydelig gjennom fargene på flex, og setningsteksten blir omgjort deretter.

Vertikal flex

Som vi tidligere har beskrevet, er ikke retningen på flex beskrevet. Som standard er det i horisontal retning med en enkelt kolonne og flere rader. Men for å lage en vertikal flex, endres retningen på flexboxen fra raden til kolonner.

#en
Flex-regi: kolonne;

Ved å bruke denne funksjonen vil en vertikal flexbox bli dannet, med all flex div intakt, og rekkefølgen på all flex vil være den samme.

Ombestill Flexbox

Flexboxen kan omorganiseres ved å spesifisere en hvilken som helst flex inne i boksen som kommer på første stilling. Vi har valgt den tredje som får en ordre på -1, tekstfargen endres fra svart til rød, og størrelsen økes også for å diskriminere den fra andre.

Denne tredje flex vil bli fjernet fra bestillingslisten. Ved å gjøre dette vil ikke bestillingen opprettholdes. Boksen som kommer til den første posisjonen vil forstyrre rekkefølgen på hele Div.

Ved utførelsen vil du se at den første blokken blir flyttet mot retten til å danne et sted for 3^Rd blokkere. På denne måten kan vi omorganisere flexboxen ved å spesifisere en flex.

Konklusjon

I denne artikkelen prøvde vi å beskrive CSS Flex Order -egenskapen ved å opprette en flexbox og flexinnhold inne i den. Flex -ordren brukes ved å legge til farger og tekst til flex som viser at ordren vi har nevnt opprettholdes. Videre kan vi reversere ordren ved å nevne flex-regi-strømmen i reversert orden. Den horisontale retningen er standardretning for flex; Det kan også endres i den vertikale retningen ved å endre radretningen i kolonnen. Alle disse effektene forklares ved å bruke spesifiserte koder for å forklare konseptet Flex Order.

.