CSS Fleksibel bokslayout - CSS Flexible Box Layout

CSS Flexible Box Layout , almindeligvis kendt som Flexbox , er en CSS 3 -weblayoutmodel. Det er i W3Cs kandidatanbefaling (CR) -fase. Flex-layoutet gør det muligt automatisk at arrangere responsive elementer i en container afhængigt af skærmstørrelse (eller enhed).

Begreber

De fleste websider er skrevet i en kombination af HTML (Hypertext Markup Language) og CSS (Cascading Style Sheets). Kort sagt specificerer HTML indholdet og den logiske struktur på siden , mens CSS angiver, hvordan det ser ud : dets farver, skrifttyper, formatering, layout og styling.

CSS flex-box layout er en bestemt måde at specificere HTML-siders layout på.

Et af de mest definerende træk ved flex-layoutet er dets evne til formtilpasning baseret på dets visningsmiljø. Flex-bokse kan justeres i størrelse - enten faldende, for at undgå unødvendigt monopol på plads eller øges for at gøre plads til indhold, der begrænses inden for dets grænser. Desuden er flexlayoutet mindre restriktivt med hensyn til indholdsflow end dem, for eksempel for blok- og inline-displaytyperne, som generelt er ensrettet. Den fleksible retningsstrøm kan specificeres som højre, venstre, opad eller nedad. Individuelle genstande i en flexcontainer kan også automatisk omarrangeres og omarrangeres, så de passer til det tilgængelige layoutplads.

Historie

I 2000'erne motiverede den intensive brug af Internettet af mobile agenter "flydende layouts" og responsive elementer til det voksende udvalg af skærmstørrelser. I 2010'erne inspirerede den intensive brug af populære JavaScript-layoutrammer, såsom Bootstrap , CSS flex-box og grid layout specifikationer.

CSS 3-moduler inkluderede løsninger, der ligner dette, som flexbox og grid .

Fra september 2020 understøtter 98,69% af de installerede browsere (99,29% af desktop-browsere og 100% af de mobile browsere) CSS Flexible Box Layout.

Terminologi

Følgende udtryk er knyttet til flexbox-layoutmodellen.

Flex beholder

Forældreelement, der indeholder alle flex-genstande. Ved hjælp af CSS-skærmegenskaben kan containeren defineres som enten flex eller inline-flex.

Fleksibel vare

Ethvert direkte underordnet element, der holdes i flexcontaineren, betragtes som et flex-element. Enhver tekst i containerelementet er pakket ind i et ukendt flex-element.

Akser

Hver flexboks indeholder to akser: hoved- og tværakse. Den hovedakse er den akse, hvorpå emnerne på linie med hinanden. Den tværaksen er vinkelret på hovedaksen.

Flex-retning

Etablerer hovedaksen. Mulige argumenter: række (standard), række-omvendt, kolonne, kolonne-omvendt.

Retfærdiggør-indhold

Bestemmer, hvordan indhold placeres på hovedaksen på den aktuelle linje. Valgfri argumenter: venstre, højre, center, mellemrum, mellemrum.

Juster emner

Bestemmer standard for, hvordan flex-emner placeres på tværaksen på hver linje.

Juster-indhold

Bestemmer standard for, hvordan tværakslinjer er justeret.

Juster selv

Bestemmer, hvordan et enkelt element placeres langs tværaksen. Dette tilsidesætter standardindstillinger, der er angivet af align-items.

Kørselsvejledning

krydsstart

tværgående

De tværgående start / cross-end sider bestemme, hvor flex linjer få fyldt med flex elementer fra cross-start til at krydse udgang.

hovedstart

main-end

De vigtigste-start / main-end sider bestemme hvor du skal begynde at placere flex elementer inden for flex beholder, startende fra den vigtigste start ende og går til hoved-ende ende.

Bestille

Placerer elementer i grupper og bestemmer, hvilken rækkefølge de skal placeres i containeren.

Flex-flow

Shorthands flex-retning og flex-wrap for at placere flex-indholdet.

Linjer

Linjer

Flex-emner kan enten placeres på en enkelt linje eller på flere linjer som defineret af flex-wrap-egenskaben, som styrer både retningen af ​​tværaksen og hvordan linjer stabler inde i containeren.

Dimensioner

Hovedstørrelse

Korsstørrelse

Hovedstørrelse og tværstørrelse er højden og bredden af ​​flexcontaineren, der hver især har henholdsvis hoved- og tværakse.

Anvendelse

At betegne et element som et flex-element kræver, at elementets CSS-skærmegenskab indstilles til enten flex eller inline-flex, som følger:

display: flex;

Eller:

display: inline-flex;

Ved at indstille skærmen til en af ​​de to værdier ovenfor, bliver et element en flexcontainer, og dets børn bøjer elementer. Indstilling af displayet til flex gør containeren til et element på blokniveau , mens indstilling af displayet til inline-flex gør containeren til et element på niveauet .

Juster til centrum

En af fordelene ved flexbox er muligheden for let at tilpasse emner i containeren til midten af ​​en side, både lodret og vandret.

display: flex;
align-items: center;
justify-content: center;

Referencer