Flexbox -elementer egenskaper i CSS | Forklart
Denne oppskrivningen vil hjelpe deg med å forstå de nedenfor-listede aspektene ved CSS Flexbox-elementene:
- Flexbox -elementer i CSS
- Flexbox -elementer egenskaper i CSS
- Hvordan implementere Flexbox -elementer egenskaper i CSS
Så la oss begynne!
Flexbox -elementer i CSS
Mens vi oppretter flex -beholderen i Flexbox, bruker vi visningsegenskapen og tildeler den verdien til den, for eksempel flex, inline. På den tiden blir det direkte barnet til den flex -beholderen flex -elementet. Figuren gitt nedenfor vil gi en bedre forståelse:
Flexbox -elementer egenskaper i CSS
Tabellen nedenfor vil gi deg en kort oversikt over Flexbox -egenskaper:
| Egenskaper | Beskrivelse |
|---|---|
| rekkefølge | Den kontrollerer rekkefølgen på barneelementer i flex -beholderen. |
| Flex-Grow | Det bestemmer vekstfaktoren for et flex -element. |
| Flex-shrink | Det bestemmer krympingsfaktoren for et barnelement/flex -element. |
| Flex-basis | Det bestemmer den første størrelsen på et barnelement/flex -element. |
| Flex | Det er en shorthand-eiendom for tre eiendommer Flex-Grow, Flex-Shrink og Flex-Basis. |
| Align-Self | Det gjør at standardjustering (langs kryssaksis) kan overstyres for individuelt barnelement/flex-elementer. |
Hvordan implementere Flexbox -elementer egenskaper i CSS
I denne delen vil vi diskutere hver Flexbox -egenskap nevnt ovenfor og implementere dem praktisk for en dyp forståelse:
Eksempel 1: CSS -bestillingsegenskaper
Det krever en numerisk verdi å sortere elementene i en bestemt rekkefølge. Kodebiten nedenfor lar deg forstå hvordan ordreegenskapen fungerer i en flexbox:
Bestill eiendom
Første vare
Andre vare
Tredje vare
Fjerde vare
Femte vare
I ovennevnte kodebit benyttet vi ordreegenskapen til å arrangere Flexbox -elementene i henhold til vårt valg:
Utgangen viser at ordreegenskapen ordnet flex-elementene i henhold til den brukerspesifiserte ordren.
Eksempel 2: CSS Flex-Grow-eiendom
Det tar en numerisk verdi som representerer hvor raskt en flex -vare vil vokse sammenlignet med de andre flex -elementene. La oss vurdere oss for klarheten i konsepter, og vurdere kodestykket:
Flex-Grow-eiendom
Første vare
Andre vare
Tredje vare
Fjerde vare
Femte vare
I dette eksemplet er standardverdien for Flex-Grow-egenskapen 0, så hver containerelement vil vokse deretter. Imidlertid vil de andre og fjerde elementene i beholderen vokse tolv tid raskere enn andre elementer fordi disse to elementene spesifiserte verdien av Flex-Grow-egenskapen som 12:
Ovennevnte utdrag bekreftet arbeidet med Flex-Grow-eiendommen.
Eksempel 3: CSS Flex-Basis-egenskap
I kodebiten nedenfor implementerer vi Flex-Basis-egenskapen for å angi størrelsen på andre og fjerde elementer i beholderen:
Flex-Basis-eiendom
Første vare
Andre vare
Tredje vare
Fjerde vare
Femte vare
Vi setter verdien av Flex-Basis-egenskapen som 150px for andre og fjerde gjenstander. Ovennevnte kode vil generere følgende utdata:
Tilsvarende kan vi bruke de andre Flexbox -elementegenskapene for å oppnå forskjellige funksjonaliteter.
Konklusjon
Flex -beholderen eller overordnede elementet er en boks/beholder som inneholder flere flex -elementer, mens alt inne i en flexbox -beholder kalles et flexbox -element eller barneelement. For å lage flex -beholderen i Flexbox, bruker vi visningsegenskapen og tilordner den enten flex eller inline -verdi; Som et resultat blir det direkte barnet til den flex -beholderen flex -elementet. I CSS er flere egenskaper tilgjengelige for å jobbe med Flexbox-elementer, for eksempel ordrekontroller rekkefølgen på Flexbox-elementer, bestemmer Flex-Grow vekstfaktoren for flex-elementene osv. Denne artikkelen dekket flere Flexbox -elementegenskaper og forklarte hvordan du bruker dem for å oppnå funksjonalitetene sine.