Hur man använder Flex för att justera HTML-element

Flexegenskaperna i CSS låter dig justera objekt mer flexibelt och lyhört. Detta gör det användbart när du vill att dina HTML-element ska vara mer responsiva i webbläsaren.

Den här artikeln kommer att gå igenom hur du kan använda vissa flexegenskaper. Detta inkluderar egenskaperna flex-direction, justify-content, align-self, align-items, align-content och gap.

Hur man ställer in CSS Flex Display

En exempelstruktur som du kan använda för att utforska grunderna i flexbox är en uppsättning underordnade div: er under en ensamstående div. I koden nedan finns en huvud "förälder" div. De tre underordnade diverna representerar objekt som du kan justera med hjälp av flexegenskaper.

För att någon flex styling ska fungera måste du lägga till display: flex egendom till den överordnade flexbehållaren.

.parent {
 display: flex;
}

Utan flex visas de underordnade diverna en efter en i en kolumnformation nere på sidan.

För att se ett exempel på denna inställning, se och kör koden i denna CodePen-kodavsnitt.

Hur man kontrollerar layoutriktningen

De flex-riktning egenskapen bestämmer rad- eller kolumnriktningen för de underordnade objekten.

Alternativ för egenskapen flex-direction inkluderar:

flex-riktning: rad | kolumn | rad-omvänd | kolumn-omvänd

Du måste lägga till en överordnad behållare som omger objekten du vill justera.

HTML:

CSS:

.red { bakgrundsfärg: röd; }
.orange { bakgrundsfärg: orange; }
.yellow { bakgrundsfärg: gul; }
.green { bakgrundsfärg: grön;}
.blue { bakgrundsfärg: blå; }
.purple { bakgrundsfärg: lila; }
.parent div {
 bredd: 40px;
 höjd: 40px;
}

Tillämpa egenskapen flex-direction på den överordnade flexbehållaren. Detta kommer att justera de underordnade div-objekten.

.parent {
 bredd: 300px;
 display: flex; 
 flex-riktning: rad;
}

Många flexegenskaper hänvisar till begreppet huvudaxel och tväraxel. När flex-riktning är rad, huvudaxeln representerar den horisontella riktningen och tväraxeln representerar den vertikala. Ett värde på kolumn växlar dessa axlar.

Se koden för flex-direction-egenskapen i denna CodePen-kodavsnitt för att se några exempel.

Hur man justerar föremål längs tväraxeln

De align-objekt egenskap styr justeringen av objekt längs tväraxeln. För standard flex-riktning, rad, align-objekt styr den vertikala justeringen av objekten.

Alternativ för egenskapen align-items inkluderar:

align-items: flex-start | flex-end | align-items | sträcka

Lägg till egenskapen align-items till den överordnade behållaren för att justera dess underordnade.

.parent {
 display: flex; 
 align-items: flex-start;
}

Dessutom kan du välja att justera objekten med hjälp av en baslinje. Som standard justerar baslinjealternativet alla objekt baserat på basen av objekten.

Du kan också välja var baslinjen börjar från, till exempel toppen (första baslinjen) eller botten (sista baslinjen).

align-items: baseline | första baslinjen | sista baslinjen;

För align-objekt: baslinje för att fungera, se till att varje objekt har olika höjd eller bredd (beroende på vilken axel du använder).

​​​

Se koden för egenskapen align-items i denna CodePen-kodavsnitt för att se några exempel.

Hur man åsidosätter justering på enskilda artiklar

Du kan använda anpassa sig egenskap för att åsidosätta alla align-items-stilar för den överordnade behållaren. Detta innebär att du kan ställa in en separat flexjustering på en enskild artikel.

Alternativ för egendomen align-self inkluderar:

align-self: auto | flex-start | flex-end | centrum | baslinje | sträcka

Säg till exempel att den överordnade behållaren har en flex-riktning styling inställd på "rad".

.parent {
 display: flex; 
 flex-riktning: rad;
}

Du kan tillämpa egenskapen align-self på det enskilda objektet. Det enskilda objektet kommer att använda stilen för egendomen align-self och centrerar objektet över den överordnade behållaren.

Se koden för align-self-egenskapen i denna CodePen-kodavsnitt för att se några exempel.

Hur man fördelar linjer över tväraxeln

De anpassa-innehåll egenskap justerar barn längs den vertikala axeln. Det kan också bestämma avståndet mellan objekt som finns på flera rader.

Alternativ för egenskapen align-content inkluderar:

align-content: flex-start | flex-end | centrum | sträcka | mellanslag | utrymme runt

Lägg till egenskapen align-content till den överordnade flexbehållaren. Egenskapen align-content fungerar bara om egenskapen flex-wrap är inställd. Lägg till flex-wrap: linda till den överordnade behållaren och minska bredden på den överordnade div för att tvinga objekten på mer än en rad.

.parent {
 flex-wrap: wrap;
 display: flex;
 align-content: flex-start;
 bredd: 180px;
}

Se koden för egenskapen align-content i denna CodePen-kodavsnitt för att se några exempel.

Hur man justerar objekt på huvudaxeln

De motivera-innehåll egenskap lägger till höger-, vänster- eller mittjustering till de underordnade objekten. Det sprider också objekten genom att lägga till mellanslag mellan dem när du motiverar innehåll.

Alternativ för egenskapen justify-content inkluderar:

motivera-innehåll: flex-start | flex-end | centrum | mellanslag | space-around | utrymmet jämnt

Linda in föremålen du vill rikta in under en överordnad flexbehållare.

HTML:

CSS:

.red { bakgrundsfärg: röd; }
.green { bakgrundsfärg: ljusgrön; }
.blue { bakgrundsfärg: blå; }

Lägg till egenskapen justify-content till den överordnade flexbehållaren.

.parent {
 bredd: 300px;
 display: flex; 
 justify-content: flex-start;
}

Egenskapen justify-content stöder också värden som anges i CSS Box Alignment-specifikationen. Detta inkluderar värden som "start", "slut", "vänster" och "höger". Vissa webbläsare stöder inte dessa.

Egenskapen justify-content har också ett "säkert" nyckelord som du kan använda. Detta säkerställer att elementen försöker hålla sig inom räckvidden för den överordnade behållaren.

Det används också för att förhindra dataförlust, i händelse av att du centrerar ett långt ord. Genom att använda nyckelordet säker förhindrar en kortare div från att skära bort första och sista bokstäverna.

.parent {
 display: flex; 
 motivera-innehåll: säkert centrum;
}

Det säkra nyckelordet är också begränsat till vissa webbläsare. Du kan kontrollera kompatibilitet på Kan jag använda.

Se koden för egenskapen justify-content i denna CodePen-kodavsnitt för att se några exempel.

Hur man lägger till mellanrum mellan objekt

De glipa egenskapen låter dig lägga till en mängd utrymme mellan objekt. Det är en av nyare CSS-funktioner som kan hjälpa dig att bygga en responsiv layout.

Applicera gap-egenskapen på den överordnade flexbehållaren.

.parent {
 display: flex;
 gap: 70px;
}

Om du lägger till ett mellanrum som tvingar längden på objekten att överskrida bredden på det överordnade, kommer objekten att krympa för att försöka passa in i raden.

.parent { 
 bredd: 300px;
 gap: 120px;
}

Om du använder flex-wrap: wrap för att skjuta objekten till en ny rad, kommer gapet även att gälla för utrymmet mellan raderna.

.parent { 
 bredd: 300px;
 flex-wrap: wrap;
 gap: 120px;
}

Dessutom kan du också ställa in rad-gap och kolumn-gap egenskaper. Återigen måste du applicera dessa på den överordnade flexbehållaren.

Egenskapen row-gap bestämmer utrymmet mellan varje rad. Egenskapen column-gap bestämmer utrymmet mellan varje kolumn.

.parent { 
 radavstånd: 120px; 
}
.parent { 
 kolumn-gap: 120px; 
}

Se koden för gap-egenskapen i denna CodePen-kodavsnitt för att se några exempel.

Använda fler Flex-egenskaper på din webbplats

Förhoppningsvis är du nu bekant med de olika flexegenskaperna du kan använda för att anpassa objekt på din webbsida. Detta inkluderar hur du kan använda egenskaperna flex-direction, justify-content, align-self, align-items, align-content och gap.

Flexbox är en kraftfull layoutteknik, men det är bara en liten del av CSS. Du kan också lära dig om nya CSS-egenskaper, rena kodningstekniker och verktyg som används för CSS-optimering.

11 Användbara verktyg för att kontrollera, rengöra och optimera CSS-filer

Läs Nästa

Om författaren