Alt om Flexbox egenskaber
Konceptet bag Flexbox-egenskaber er at give containeren en mulighed for automatisk at ændre bredden, højden og rækkefølgen af dets genstande for bedst at udfylde den disponible plads. Dette kan være virkelig nyttigt til at rumme emner inden for forskellige skærmstørrelser og enheder. Genstande udvides til at udfylde ethvert ledigt rum eller krympe for at undgå overløb.
CSS Flexbox gitter For begyndere
CSS er en af de første og nemmeste ting at lære inden for webudvikling og design, men tag ikke fejl af dens enkelthed på grund af manglende funktioner. Det har en række fantastiske funktioner og funktioner, der er klar til at blive udnyttet til, en af dem er dets relativt nye layoutmodul: Flexbox-egenskaber.
Flexbox-egenskaber er en af de nyere layouts, der er tilgængelige for CSS3, og der er meget at lære om det. Her får vi hands-on med layoutet, og hvordan vi bruger det. Før vi begynder, er her dog en lille baggrund om Flexbox-egenskaber:
Hvad er layouttilstande?
På de enkleste vilkår er CSS Flexbox-gitteret en layouttilstand. CSS har et antal eksisterende layouttilstande. Bloklayouttilstand (som display: blok) har eksisteret i lang tid. Bloklayouts er et godt valg til at style komplette dokumenter. Faktisk behandler en webbrowser flere elementer som divs og afsnit som blokniveau som standard.
En anden almindelig layouttilstand er inline. Det stærke tag, inputmærket og ankermærket er eksempler på inline-niveauelementer. Google Chromes udviklerværktøjer giver dig endda mulighed for at se et elements 'computerstil' til at bestemme CSS-egenskaber og -værdier, der er anvendt på de elementer, der ikke eksplicit er angivet af udvikleren.
Den relativt nyere Flexbox-egenskaber (Fleksibel boks) -layout er designet som en mere effektiv metode til opsætning, justering og fordeling af plads mellem containere, selv om størrelsen på disse emner er dynamisk eller ukendt. Derfor udtrykket "fleksibel".
Flexbox Properties-konceptet
Det vigtigste ved Flexbox-egenskaber er, at det er retning-agnostisk. Mens bloklayoutet er lodret-baseret og inline-layoutet er vandret-baseret, er Flexbox heller ikke. Blokering og inline fungerer godt i de rigtige situationer, men mangler fleksibilitet til at understøtte komplicerede eller store applikationer, især når det kommer til at ændre orientering, strække, krympe, ændre størrelse og ellers ændre elementernes dimensioner.
Hvor bruges Flexbox egenskaber?
Som enhver anden CSS-layout bruges Flexbox bedst i visse situationer. Især er det hensigtsmæssigt for små skalaer og komponenter i en applikation. Ved større skalaindstillinger ville et gitterlayout være det klogere valg.
Hvorfor foretrækkes Flexbox?
Mange udviklere og designere foretrækker Flexbox-egenskaber, når de kan (nogle gange for ofte!). Dette skyldes, at Flexbox-egenskaber er lettere at bruge; placeringen af elementerne er meget enklere, så du kan få mere komplekse layout med mindre kodning. Med andre ord gør det udviklingsprocessen enklere.
En guide til Flexbox-egenskaber
Nu hvor du ved lidt om Flexbox-egenskaber og hvordan og hvorfor det fungerer, her er en detaljeret vejledning til layoutet. Layoutets model består af en overordnet container, også kaldet en 'flexcontainer'. De umiddelbare børn fra denne beholder kaldes 'flex-genstande'.
Layouten har gennemgået flere iterationer og syntaksændringer gennem årene siden det første udkast blev oprettet i 2009. Den seneste Flexbox-specifikation understøttes på følgende webbrowsere:
- Opera 17+
- Internet Explorer 11+
- Mozilla Firefox 28+
- Google Chrome 29+
- Apple Safari 6.1+
- Android 4.4+
- iOS 7.1+
Terminologien, der bruges i Flexbox-egenskaber
Her er et kig på nogle grundlæggende terminologier, der bruges i Flexbox-egenskaberne:
- Display: Denne kommando bruges til at definere flexcontaineren. Det kan være inline eller blokeret, afhængigt af Det definerer også flexindhold for alle elementerne i beholderen. Eksempel:
.container (
display: flex; / * eller inline-flex * /
)
- Ordre: Flex-genstande er som standard opstillet i henhold til kildeordren, men egenskaben 'ordre' kan kontrollere den rækkefølge, hvor emnerne vises i containeren. Eksempel:
.vare (
ordre:;
)
- Flekseretning: Denne rækkefølge sætter hovedaksen op og definerer retningen for, at flexelementer placeres i beholderen. Flex-genstande kan primært lægges i lodrette eller vandrette retninger. Eksempel:
.container (
flex-retning: række | række-revers | kolonne | kolonne-revers;
)
- Flex-vokse: Denne rækkefølge definerer flex-elementets evne til automatisk at skalere op, hvis det har plads. Det kan acceptere en enhedsløs værdi, der kan tjene som en andel. Denne værdi dikterer, hvor meget plads genstanden skal tage i flexcontaineren. For eksempel, hvis alle elementer har flex-grow indstillet til 1, vil den resterende plads i beholderen blive fordelt ligeligt til alle børn. Hvis værdien er 2, optager den resterende plads to gange så meget plads som resten. Eksempel:
.vare (
flex-vokse:; / * standard 0 * /
)
- Fleksiskrymp: Dette gør nøjagtigt det modsatte, når flex-vokse, ved at det krymper flexelementerne, når det er nødvendigt. Eksempel:
.vare (
flex-shrink:; / * standard 1 * /
)
- Fleksibasis: Denne rækkefølge definerer en standardstørrelse for elementer, før resten af pladsen fordeles. Det kan være en længde, som 5rem eller 20%, eller et nøgleord. Nøgleordet "auto" angiver, at varens bredde og højde måles, og "indhold" nøgleordet angiver, at emnet er størrelse baseret på dets indhold. Eksempel:
.vare (
flex-basis: | auto; / * standard auto * /
)
- Flex: Dette er en kombineret kortfattet form for alle ovennævnte tre egenskaber: flex-grow, flex-base og flex-shrink. Standardindstillingen er '0 1 auto'.
.vare (
flex: ingen | (||)
)
- Begrund indhold: Denne rækkefølge definerer justeringen af hovedaksen og hjælper med at distribuere den ekstra ledige plads, hvis der er noget tilbage, når elementerne er ufleksible eller når deres maksimale størrelse. Dette hjælper også med at kontrollere justeringen af emnet, når der er et overløb.
.container (
justify-content: flex-start | flex ende | center | mellemrum | space-around;
)
- Align-items: Dette bruges til at definere standardadfærden i layoutet af flex-elementer på tværs af aksen på den aktuelle linje. Det er i det væsentlige en version af 'retfærdiggøre indhold' på tværgående akse, som er vinkelret på hovedaksen. Eksempel:
.container (
align-items: flex-start | flex-end | center | baseline | strække;
)
- Juster indhold: Denne rækkefølge justerer beholderens linjer, i tilfælde af at der er ekstra plads på krydsaksen. Det ligner 'retfærdiggøre indhold', men for tværaksen i stedet for hovedaksen. Hvis der kun er en linje med flexelementer, har denne egenskab ingen virkning. Eksempel:
.container (
align-content: flex-start | flex-end | center | mellemrum | rum-around | strække;
)
Brug af Flexbox egenskaber
For at bruge Flexbox-layout kan du blot indstille visningsegenskaben på HTML-overordnede element, som nedenfor:
.flex-container (
display: -webkit-flex; / * Safari * /
display: flex;
)
Hvis du foretrækker at vise som et inline-element, kan du skrive i:
.flex-container (
display: -webkit-inline-flex; / * Safari * /
display: inline-flex;
)
Du kræver kun, at denne egenskab skal indstilles på den overordnede flexbeholder og dens øjeblikkelige flexelementer. Containerbørnene bliver automatisk fleksible genstande.
Anbefalede kurser
- Online-kursus i gratis jQuery
- Online-kursus i gratis vinkel JS
- Online træning på Mudbox
- Certificeringstræning i gratis rubin
Flexbox egenskaber - Flex container egenskaber
Der er mange måder at gruppere Flexbox-egenskaber på, og den nemmeste måde at lære om dem er ved at opdele dem i Flex-container- og vareegenskaber. Vi har lige dækket nogle af flexcontaineregenskaberne ovenfor. Lad os se på resten:
-
Flekseretning: række eller kolonne
Egenskaben med flexretning kan lægges ud som søjler lodret eller rækker vandret. Med rækkeretning staples flexelementerne som standard fra venstre til højre. Række-omvendt ændrer denne retning til højre til venstre. Søjleretningen er top-til-bund som standard, og kolonne-revers-funktion vender dette til en bund-til-top-retning.
-
Flex-wrap: nu eller indpak
Flex-wrap-egenskaben styrer, om flexcontainerens børn er anbragt i flere eller enkelte linjer, og retningen, i hvilken de nye linjer er stablet. Værdien af nurap ser fleksible elementer vises i en enkelt række, krympet for at passe til bredden af containeren som standard. Omviklingsværdien ser fleksible elementer, der vises i forskellige rækker i en venstre fra højre eller top-til-bund retning. Du kan også tilføje wrap-reverse for at ændre rækkefølgen. Standardværdien er nu.
-
Flex-flow
Denne egenskab er dybest set en korthed for at indstille flex-retningen og flex-wrap egenskaberne sammen. Standardværdien er 'række nowrap'. Eksempel:
.flex-container (
flex-flow: ||
)
-
Begrund-indhold
Egenskaben med retfærdiggørelse af indhold har fire værdier: flex-start for at justere emner til venstre side af beholderen; flex-end for at justere emner til højre side; center for at justere med midten; mellemrum for at justere emner med lige mellemrum mellem dem, med det første og det sidste emne på linje med containerkanterne; og mellemrum til justering af flex-emnet med lige stor afstand omkring dem, inklusive de første og sidste emner. Flex-start er standardværdien.
-
Juster poster
Denne egenskab har fem værdier: stræk for at opskalere flexelementer til at udfylde hele bredden eller højden fra krydsstart til krydsende af containeren; flex-start til at stable genstande ved krydsstart; flex-ende til at stable genstande i tværenden; center for at justere emner mod midten af tværaksen; og baseline for at justere elementer, så deres baselinjer er på linje. Stræk er standardværdien.
-
Juster-indhold
Denne egenskab justerer linjerne i en flexcontainer, når der er ekstra plads i krydsaksen. Dets værdier er: stræk for at fordele plads efter hver række; flex-start til at stable genstande mod tværstart; flex-ende til at stable genstande mod tværenden; center til at stable genstande i midten af tværaksen; mellemrum for lige at fordele plads omkring fleksible emner. Standardværdien er stræk.
Flexbox-egenskaber - Flex-artikelegenskaber
Nu hvor du ved om Flexbox-containeregenskaber, lad os se på elementets egenskaber:
- Bestille
Denne egenskab styrer rækkefølgen på udseendet af flexcontainernes børn. De bestilles som standard i flexcontaineren.
.flex-vare (
ordre:;
)
Du kan omarrangere flexelementer uden at skulle omstrukturere HTML-koden. Standardværdien er nul.
- Juster-selv
Denne egenskab tillader, at standardjusteringen af et specifikt flexelement tilsidesættes. Du kan bruge værdierne fra alignelementer til denne egenskab.
.flex-vare (
align-self: auto | flex-start | flex-end | center | baseline | strække;
)
Den automatiske værdi i align-self beregnes af værdien af align-elementerne på elementets overordnede. Hvis elementet ikke har nogen forælder, bruges strækningen i stedet.
Grundlæggende eksempler
Det er alt hvad du behøver at vide for at bruge CSS Flexbox gitterlayout. Nu er det tid til at øve det, du lærte. Her er nogle eksempler, der viser, hvordan alle disse egenskaber samles. Lad os begynde med noget helt enkelt:
.forældre (
display: flex;
højde: 300px;
)
.child (
bredde: 100px;
højde: 100px;
margin: auto;
)
Dette er et eksempel på perfekt centrering. Højde- og breddeværdierne kan ændres, som du ønsker. Nøglen her er at indstille margen til 'auto', så flexbeholderen automatisk absorberer ekstra plads. Enkelt nok!
Lad os nu gå videre til at tilføje nogle flere egenskaber: en liste med seks emner med faste dimensioner, der kan autosize-tificeres. De skal fordeles jævnt til den vandrette akse.
.flex-container (
display: flex;
Begrund indhold: mellemrum;
)
Lad os derefter prøve at centrere en højrejusteret navigation for mellemstore skærme og gøre den enkeltkolonne på små enheder.
/* Stor */
.navigation (
display: flex;
flex-flow: rækkeindpakning;
begrunde-indhold: flex-end;
)
/ * Medium skærme * /
@media alle og (maks. bredde: 800 px) (
.navigation (
Begrund indhold: mellemrum;
)
)
/ * Små skærme * /
@media alle og (maks. bredde: 500 px) (
.navigation (
flex-retning: kolonne;
)
)
Tid til at tage dette et skridt videre! Lad os prøve en mobil-første layout med tre kolonner, med en bredde sidefod og header og uafhængig af kildens rækkefølge.
.indpakning (
display: flex;
flex-flow: rækkeindpakning;
)
/ * Vi fortæller, at alle varer skal være 100% bredde * /
.header, .main, .nav, .aside, .footer (
flex: 1 100%;
)
/ * Vi er afhængige af kildeordre til mobil-første tilgang * /
/ * Medium skærme * /
@media alle og (min. bredde: 600 px) (
.aside (flex: 1 auto; )
)
/ * Store skærme * /
@media alle og (min. bredde: 800 px) (
.main (flex: 2 0px; )
.aside-1 (rækkefølge: 1; )
.main (rækkefølge: 2; )
.aside-2 (rækkefølge: 3; )
.footer (ordre: 4; )
)
Konklusion
Dette er blot nogle grundlæggende eksempler. Du kan lege meget mere med CSS Flexbox-gitterlayouter, og de er absolut uvurderlige, hvis du vil lave en responsiv webside.
Anbefalede artikler
Så her er nogle artikler, der hjælper med at få mere detaljeret information om flexbox-egenskaber, flexbox-kode og også om css-flexbox-gitteret, så bare gå gennem linket, der er givet, er vist nedenfor.
- HTML vs XML - Topforskelle
- CSS3 vs CSS - Hvordan er de forskellige? (Infograph)
- HTML vs CSS Topforskelle
- HTML5 vs Flash