Flexboxlayout: Så fördelar du barnlement jämnt

Flexbox är en kraftfull layoutmodul i CSS som hjälper dig att effektivt använda den tillgängliga platsen inom en behållare. I denna handledning kommer du att lära dig hur du jämnt kan fördela barnkomponenter i en flexbehållare. Detta är särskilt användbart för responsiva design där fönstrets bredd kan ändras. Låt oss börja!

Viktigaste insikter

• Med Flexbox kan barnkomponenterna i layouten jämnt fördelas genom att elementens flexvärden ställs in därefter.
• Du kan göra storleken på barnkomponenterna flexibel så att de automatiskt anpassar sig till den tillgängliga platsen utan att behöva använda fasta mått.

Steg-för-steg-guide

För att förstå hur du jämnt kan fördela barnkomponenter i en flexbehållare, följ dessa steg:

Först skapar du en flexbehållare genom att tillämpa CSS-egenskapen display: flex;. Här är ett enkelt exempel på hur du kan göra det. Se till att behållaren är justerad i rad-format:

I detta tillstånd fördelas platsen jämnt på alla barnkomponenter så länge dessa barnkomponenter inte har fasta bredder. Om du anger bredden på barnkomponenterna och ställer in den på 100 pixlar, kommer de visserligen att fördelas jämnt i behållaren men det är inte optimalt för responsiv design:

Om du tar bort de fasta bredderna ser du snabbt att platsen minskas dramatiskt, särskilt om det inte finns någon text i barnkomponenterna. I detta fall kollapsar allt till den minimala bredden som definieras av texten:

För att jämnt fördela den tillgängliga platsen måste du ställa in flexvärdet för barnkomponenterna. Detta görs enkelt genom att tillämpa flex-egenskapen som tillåter dig att definiera en proportionell del av den tillgängliga platsen. Ange flexvärdet för varje barnkomponent till 1:

När du har gjort detta ser du att alla barnkomponenter har jämnt fördelat platsen. Detta är en mycket flexibel lösning eftersom den dynamiskt anpassar sig till behållarens bredd:

Du kan också variera flexvärdena för att skapa olika andelar. Till exempel, om det första elementet ska få hälften av platsen, kan du sätta det till flex: 2;, medan de andra elementen behåller flex: 1;:

När du har justerat värdena kommer barnkomponenterna att fördelas enligt de inställda värdena. Genom de flexibla andelarna du har tilldelat får det första elementet mer plats än de andra:

När du ändrar behållarens bredd förblir proportionerna stabila. Oavsett om du ändrar bredden till 800 pixlar eller 400 pixlar, anpassar sig barnkomponenterna automatiskt och fördelar platsen jämnt baserat på de tidigare angivna flexvärdena:

Du kan också enkelt anpassa Flexbox-egenskaperna genom att ändra flexriktningen. Om du till exempel ändrar flexbehållaren från rad till kolumn, förblir logiken för fördelningen densamma. Barnkomponenterna kommer då att ordnas vertikalt:

Se till att höjden på barnkomponenterna inte är fastställd för att behålla flexibiliteten. Detta fungerar särskilt bra för responsiva design eftersom barnkomponenterna anpassar sig beroende på skärmstorlek och -orientering:

På detta sätt kan du skapa en mycket responsiv layout som säkerställer att din design ser utmärkt ut på både skrivbord och mobila vyer.

Sammanfattning

I den här handledningen har du lärt dig hur du använder Flexbox i CSS och HTML för att jämnt fördela barnkomponenterna. Tack vare flexegenskaperna kan du skapa responsiva layouter som smidigt anpassar sig till olika skärmstorlekar och format.