Den utrolige kraft i Flexbox

Sep 13, 2025

hvordan

Flexbox eller det fleksible boks layout, er et kraftfuldt CSS layoutmodul, der giver webdesignere og udviklere en effektiv og enkel måde at lægge ud, justere og distribuere elementer i en beholder. Det løser mange layoutproblemer, vi har kæmpet for at løse i lang tid.

FlexBox Basics.

I sin mest grundlæggende form består Flexbox af to elementer: en Flex Container (eller Flex Forældre) og Flex-elementer (Flex Børn). En Flex-beholder er et indeholdende element (som a Div. ) I betragtning af displayegenskaben Flex. . Flex elementer er barnelementer af en Flex Container, som kan manipuleres gennem forskellige skærmegenskaber.

Flex containere og flexelementer har hver deres egen række egenskaber, der kan kombineres på forskellige måder at skabe en række komplekse layouts. Varer inde i en FLEX Container kan udlægges vandret eller lodret, justeret og distribueret på forskellige måder og strækkes eller krympes for at passe til det ledige rum. Alle disse muligheder giver dig mulighed for nemt at skabe lydhørlige layouts.

Sådan bruger du Flexbox

For at begynde at bruge Flexbox skal du først oprette din Flex Container (det forældremyndighed, der indeholder dine Flex-elementer). I dette eksempel bruger vi en Div. blok. Før vi stiver elementet, lad os tilføje tre flere Div. Blokerer inde i vores flex container for at fungere som Flex-elementerne. På dette tidspunkt vil emnerne blive stablet.

Med vores Child Divs på plads, kan vi indstille moderbeholderens displayegenskab til Flex. .

 Flex Container {
Display: Flex;
}

Layout retninger.

Layoutretningen er simpelthen den retning, dine elementer vil distribuere sig selv. Standardretningen for en Flex Container er række , som vil vise barnetelementerne vandret. Du kan skifte layoutet til lodret ved at indstille retningen til kolonne .

 Flex Container {
Display: Flex;
FLEX-DIRECTION: ROW;
}

Flex container {
Display: Flex;
FLEX-DIRECTION: Kolonne;
}

Uanset hvilken retning du indstiller på din Flex Container, kaldes dens 'hovedretning, mens den anden retning, du ikke valgte, bliver' Cross '-retningen. Således vil hovedretningen som standard være vandret, og krydsretningen vil være lodret.

Flexbox lader dig også vende om layoutet. Når der vender tilbage, vil børn af en Flex Container blive lagt ud til venstre (hvis retning er række ) eller nederst til top (hvis retning er kolonne ).

 Flex Container {
Display: Flex;
FLEX-DIRECTION: ROW-REVERT;
}

Flex container {
Display: Flex;
FLEX-DIRECTION: Kolonne-Reverse;
}

Dette kan komme til nytte, hvis du vil vende layoutet på mindre skærme.

Lad os f.eks. Sige på desktopskærme, du vil vise tekst på venstre side af skærmen og et billede til højre (se Surfboard-billede ovenfor). På mobilen vil dette flytte billedet under teksten. Ved at vende retningen kan du sikre, at billedet vises over teksten i stedet.

Juster justering

Flexboxs indstillinger giver dig også to forskellige metoder til justering af indhold: lodret og vandret. Her er dine vandrette justeringsmuligheder for varer inde i en Flex Container:

Flex-Start. : Varer sat mod starten af rækken (venstre, medmindre du har vendt layoutet)

centrum : Varer centreret inden for rækken

Flex-end. : Varer sat mod slutningen af rækken (højre, medmindre du har vendt layoutet)

Space-Mellem : Varer jævnt fordelt langs rækken

pladserende : Varer jævnt fordelt langs rækken, med lige plads på begge sider af hvert element

Så koden kan se sådan ud:

 Flex Container {
Display: Flex;
FLEX-DIRECTION: ROW;
Juster-indhold: Flex-Start | Flex-End | center | mellemrum mellem | pladsområdet | strække;
}

Her er dine vertikale justeringsmuligheder for elementer i en FLEX Container:

Flex-Start. : Varer justeret til toppen af rækken

centrum : Varer er centreret inden for rækken

Flex-end. : Varer justeret til bunden af rækken

strække : Varer strækket over højre af rækken

baseline. : Varer justeret til deres basislinjer (den imaginære linje, som teksten sidder på)

Koden kan se sådan ud:

 Flex Container {
Display: Flex;
FLEX-DIRECTION: ROW;
Juster-genstande: Flex-Start | Flex-End | center | Baseline | strække;
}

Som standard vil en Flex Container's børn altid forsøge at passe på en enkelt linje. Hvis du vil ændre dette, kan du tilføje wrap. attribut. Dette gør det muligt for børn at pakke til en ny linje, hvis de løber tør for plads.

 Flex Container {
Display: Flex;
Flex-wrap: Wrap;
}

Flex elementer får også deres egne flex-baserede egenskaber. Når et element er placeret inde i en Flex-beholder, bliver den automatisk et FLEX barn, og får sit eget sæt Flex-baserede CSS-stilarter. Disse stilarter kontrollerer limning, justering og displayordre.

Flex dimensionering

Flex Børn kan ændre deres bredde eller højde (afhængigt af beholderens layoutretning) for at fylde ledigt plads.

Webflow giver dig tre forudindstillede muligheder for Flex-dimensionering: Fyld hvis det er nødvendigt, fyld tom plads og ikke krympes. Bemærk, at hvert barnelement kan have sine egne indstillinger, hvilket giver mulighed for en overflod af designmuligheder.

 Flex Item {
Flex-Shrink: & lt; nummer & gt ;;
Flex-Grow: & lt; nummer & gt ;;
Flex-basis: & lt; længde & gt; | auto;
}

Lad os se på, hvad hver af disse muligheder gør:

Skrumpe hvis det er nødvendigt: Størrelser varen baseret på sin bredde / højde eller dets indhold. Varen vil ikke blive større end det skal, men kan krympe til dens minimumsstørrelse for at forhindre overløb
Fyld tom plads: Tillader, at varen udvides til at udfylde alt ledigt rum inde i sin forælder. Hvis du sætter dette på alle elementer i en Flex Container, vil de udvide for at tage lige store mængder tom plads
Skrin ikke: Størrelser varen baseret på sin bredde / højde eller dets indhold, men tillader ikke det at krympe, selvom det vil forårsage overløb

Flex elementer kan også have deres egne justeringsindstillinger, som tilsidesætter standardjusteringen af deres forældreffektbeholder. Disse justeringer opfører sig som forklaret tidligere.

 Flex Item {
Display: Flex;
FLEX-DIRECTION: ROW;
Juster-genstande: Flex-Start | Flex-End | center | Baseline | strække;
}

Som standard vises flexelementer i samme rækkefølge, som de vises i kildekoden. Med Flexbox kan du tilsidesætte denne adfærd for at sikre, at elementer vises i præcis den ordre, du vil have.

De er fire hovedindstillinger, du kan bruge her:

Auto. : Standardværdien, som bestiller varer som de er i kilden
Først : Varen vises først i sin flex container
Sidst : Varen vises sidst i sin flex container
Brugerdefinerede : Du kan tilpasse den rækkefølge, din vare vil blive vist i

Brugerdefineret rækkefølge kan defineres som et nummer, som angiver den rækkefølge, hvor flexelementet vises inde i en Flex Container.

 Flex Item {
Bestilling: & lt; integer & gt ;;
}

Hvorfor skal jeg bruge det?

Jeg er glad for at du spurgte! Brug af Flexbox giver dig mulighed for nemt at skabe lydhørlige layouts, der engang var meget vanskelige (eller umulige) at skabe med ældre CSS layoutmoduler.

Tag et kig på eksemplerne i billedet nedenfor - hvoraf mange du sandsynligvis allerede har set på tværs af internettet. Næsten alle dem ville tage en betydelig mængde CSS (især på tværs af forskellige skærmstørrelser), men kun tage et par enkle linjer for at opnå med Flexbox. For at se disse eksempler i aktion, besøg flexbox.webflow.com. .

Den utrolige kraft i Flexbox

FlexBox Basics.

Sådan bruger du Flexbox

Layout retninger.

Juster justering

Flex dimensionering

Hvorfor skal jeg bruge det?

hvordan - Mest populære artikler

Mixed-Media Art Tutorial: Sådan Accolor Over Digital Artwork

Easy Posing Techniques til 3D-modeller

Sådan udarbejdes en fil til print

Tænd dine menuer med animation med CSS

Opret perfekte beskeder i alle e-mail-klienter

Sådan får du mere fra GIFS

Modellering af et rumskib til gameplay design

Sådan bruger du Photoshop's 'Match Font' funktion

Kategorier