Flexboxens otroliga kraft

Sep 11, 2025

Hur

Flexbox, eller den flexibla boxlayouten, är en kraftfull CSS-layoutmodul som ger webbdesigners och utvecklare ett effektivt och enkelt sätt att lägga ut, justera och distribuera element i en behållare. Det löser många layoutproblem vi har kämpat för att lösa länge.

FlexBox-grunderna

I sin mest grundläggande form består FlexBox upp av två element: en flexbehållare (eller flex förälder) och flexobjekt (flex barn). En flexbehållare är ett innehållande element (som a div ) med tanke på displayen böja . Flexobjekt är barnelement i en flexbehållare, som kan manipuleras genom olika displayegenskaper.

Flexbehållare och flexartiklar har alla egna utbud av egenskaper som kan kombineras på olika sätt för att skapa en rad komplexa layouter. Objekt i en flexbehållare kan läggas ut horisontellt eller vertikalt, inriktas och distribueras på olika sätt och sträcker sig eller krymptes för att passa det lediga utrymmet. Alla dessa alternativ låter dig enkelt skapa mottagliga layouter.

Hur man använder Flexbox

För att börja använda Flexbox måste du först skapa din flexbehållare (moderelementet som innehåller dina flexobjekt). I det här exemplet använder vi en div blockera. Innan vi stilar elementet, låt oss lägga till tre mer div Blockerar inuti vår flexbehållare för att fungera som flexobjekt. Vid denna tidpunkt kommer föremålen att staplas.

Med vårt barns div på plats kan vi ställa in föräldrabehållarens displayfastigheter till böja .

 Flex Container {
Visa: Flex;
}

Layout Vägbeskrivning

Layoutriktningen är helt enkelt den riktning som dina element kommer att distribuera sig själva. Standardriktningen för en flexbehållare är rad , som kommer att visa barnelementen horisontellt. Du kan byta layout till vertikal genom att ställa in riktningen till kolumn .

 Flex Container {
Visa: Flex;
Flex-riktning: rad;
}

Flex Container {
Visa: Flex;
Flex-riktning: kolonn;
}

Oavsett vilken riktning du ställde på din flexbehållare kallas dess "huvud" riktning, medan den andra riktningen du inte valde blev "korsriktningen. Således kommer huvudriktningen som standard att vara horisontell och tvärriktningen blir vertikal.

Flexbox låter dig också vända layouten. Vid omvänd, kommer barn av en flexbehållare att läggas ut höger till vänster (om riktningen är rad ) eller botten till toppen (om riktningen är kolumn ).

 Flex Container {
Visa: Flex;
Flex-riktning: rad-omvänd;
}

Flex Container {
Visa: Flex;
Flex-riktning: kolumn-omvänd;
}

Detta kan komma till nytta om du vill vända layouten på mindre skärmar.

Till exempel, låt oss säga på skrivbordsskärmar som du vill visa text på vänster sida av skärmen och en bild till höger (se surfbräda ovanstående). På mobilen skulle detta flytta bilden under texten. Genom att vända riktningen kan du se till att bilden visas ovanför texten istället.

Justera justeringen

Flexboxs inställningar ger dig också två olika metoder för att anpassa innehållet: vertikalt och horisontellt. Här är dina horisontella anpassningsalternativ för objekt i en flexbehållare:

flexstart : Objekt som ställs in mot början av raden (vänster, om du inte har vänt layouten)

Centrum : Objekt centrerade i raden

flexänd : Objekt som ställs in mot slutet av raden (höger, om du inte har vänt layouten)

rymd- mellan : Föremål som är jämnt fördelade längs raden

rymd- : Föremål som är jämnt fördelade längs raden, med lika utrymme på vardera sidan av varje element

Så koden kan se ut så här:

 Flex Container {
Visa: Flex;
Flex-riktning: rad;
Justera innehåll: Flex-Start | Flex-end | center | utrymme-mellan | utrymme-runt | sträcka;
}

Här är dina vertikala anpassningsalternativ för objekt i en flexbehållare:

flexstart : Föremål som är anpassade till toppen av raden

Centrum : Objekt är centrerade i raden

flexänd : Föremål som är anpassade till botten av raden

sträcka : Objekt sträckt över radens höjd

baslinje : Föremål som är anpassade till sina baslinjer (den imaginära linjen som texten sitter på)

Koden kan se ut så här:

 Flex Container {
Visa: Flex;
Flex-riktning: rad;
Justeringsposter: Flex-Start | Flex-end | center | baslinje | sträcka;
}

Som standard försöker en Flex Containers barn alltid att passa på en enda rad. Om du vill ändra detta kan du lägga till slå in attribut. Detta gör det möjligt för barn att fälla till en ny linje om de löper ut ur rymden.

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

Flexobjekt får också sina egna flexbaserade egenskaper. När ett element är placerat i en flexbehållare blir det automatiskt ett flexbarn, och beviljas sin egen uppsättning flexbaserade CSS-stilar. Dessa stilar styr storlek, anpassning och visningsorder.

Flexstorlek

Flex barn kan ändra sin bredd eller höjd (beroende på behållarens layoutriktning) för att fylla ledigt utrymme.

WebFlow ger dig tre förinställda alternativ för flexstorlek: krympa om det behövs, fyll tomt utrymme och krympa inte. Observera att varje barnelement kan ha egna inställningar, vilket möjliggör en mängd designalternativ.

 Flexobjekt {
Flex-shrink: & lt; nummer & gt ;;
Flex-Grow: & lt; nummer & gt ;;
Flex-basis: & lt; längd och gt; | bil;
}

Låt oss ta en titt på vad varje av dessa alternativ gör:

Krympa om det behövs: Storlekar objektet baserat på dess bredd / höjd eller dess innehåll. Varan kommer inte att växa större än vad det behöver, men kan krympa till sin minsta storlek för att förhindra överflöde
Fyll tomt utrymme: Tillåter att objektet expanderar för att fylla allt ledigt utrymme i sin förälder. Om du ställer in det på alla objekt i en flexbehållare, kommer de att expandera för att ta upp lika stora mängder tomt utrymme
Krympa inte: Storlekar objektet baserat på bredden / höjd eller dess innehåll, men tillåter inte det att krympa, även om det kommer att orsaka överflöde

Flexobjekt kan också ha sina egna anpassningsinställningar, som åsidosätter standardinriktningen som ställs in av deras moderflexbehållare. Dessa anpassningar beter sig som förklaras tidigare.

 Flexobjekt {
Visa: Flex;
Flex-riktning: rad;
Justeringsposter: Flex-Start | Flex-end | center | baslinje | sträcka;
}

Som standard visas Flex-objekt i samma ordning som de visas i källkoden. Med FlexBox kan du åsidosätta detta beteende för att säkerställa element som visas i exakt den ordning du vill ha.

Det finns fyra huvudalternativ du kan använda här:

Bil : Standardvärdet, som beställer objekt som de är i källan
Först : Föremålet visas först i sin flexbehållare
Sista : Föremålet visas i sin flexbehållare
Beställnings : Du kan anpassa beställningen Ditt objekt visas i

Anpassad beställning kan definieras som ett nummer, vilket anger den ordning i vilken Flex-objektet visas i en flexbehållare.

 Flexobjekt {
Beställning: & lt; heltal & gt ;;
}

Varför ska jag använda den?

Jag är glad att du frågade! Med hjälp av FlexBox kan du enkelt skapa mottagliga layouter som en gång var mycket svåra (eller omöjliga) att skapa med äldre CSS-layoutmoduler.

Ta en titt på exemplen i bilden nedan - varav många har nog redan sett på webben. Nästan alla skulle ta en stor mängd CSS (speciellt över olika skärmstorlekar), men ta bara några enkla linjer för att uppnå med Flexbox. För att se dessa exempel i aktion, besök Flexbox.webflow.com .

Flexboxens otroliga kraft

FlexBox-grunderna

Hur man använder Flexbox

Layout Vägbeskrivning

Justera justeringen

Flexstorlek

Varför ska jag använda den?

Hur - Mest populära artiklar

Arbeta smart med din zbrush ui

Hur man komprimerar bilder: En webbdesigners guide

Bygg en komplex 3D-sci-fi-scen i Blender

Bygga appar som fungerar offline

Nivån upp speltecken med kreativ montering

Hur man målar Fantasy Beasts

Rita en pennaporträtt av en hund

Snabba upp din 3D-modellering

Kategorier