Flexbox är en utmärkt metod för att hantera sidlayouter i CSS. Den kan manipulera höjden och bredden på ett föremål för att uppta allt utrymme i den överordnade behållaren (“flex-container”) och kontrollera det vertikala och horisontella flödet för varje barn (“flex-items”).
Om du är ny på flexbox lär du dig allt du behöver för att komma igång direkt. Vi kommer ner till grunderna och diskuterar de mest använda flexbox-egenskaperna med lämpliga exempel.
Vad är CSS Flexbox?
Till skillnad från traditionella layouter (blocklayout, inlinelayout, tabelllayout och positionerad layout) är Flexbox en optimerad boxmodell för att designa komplexa användargränssnittslayouter. Det är sant att CSS används för att utforma element, men CSS Flexbox ger effektiva lösningar till bordet när det kommer till att bygga responsiva och flytande layouter, anpassa element och styra och ordna om element utan att ändra HTML.
Med andra ord, med hjälp av CSS flexbox är elementen “flexibla” och kan storleksändras och positioneras optimalt för att utveckla en modern responsiv design.
Grundläggande Flexbox-koncept och terminologi
Flex-behållare och flex-artikel är grundkomponenterna i flexbox-layouten. Du kan överväga flex-behållare som ett överordnat element på en sida som innehåller barn som kallas flex-artiklar. Huvudtanken bakom flexlayouten är att alla flex-artiklar inuti flex-behållare är antingen utlagda längs huvudaxeln eller tväraxeln som visas nedan:
huvudaxel: Om flex-objekt är justerade i en rad, kommer huvudaxeln att ligga längs raden. Å andra sidan, om flex-artiklar är justerade i en kolumn, kommer huvudaxeln att justeras längs kolumnen. I ett nötskal, flex-riktning bestämmer huvudaxeln.
tväraxel: Den är vinkelrät mot huvudaxeln. Med andra ord, om flex-riktning är rad eller rad-omvänd, kommer huvudaxeln att löpa längs flexbehållarens bredd, och därför kommer tväraxeln att löpa längs med flexbehållarens höjd. Å andra sidan, om flex-riktning är kolumn eller kolumn-omvänd, kommer huvudaxeln att löpa längs med flexbehållarens höjd, och därmed kommer tväraxeln att löpa längs bredden av flex-behållare.
Flexbox-egenskaper för Flex Container
De visa fast egendom:
Det första du måste göra är att ställa in visa egendom till böja. Detta definierar en flexbehållare. Andra värden för olika layouter kan vara i kö, blockera, och inline-block. Genom att spara display: flex; du möjliggör en flexkontext för alla flex-artiklar.
De flex-riktning fast egendom:
Den används för att anpassa huvudaxelns orientering inuti flex-behållare. Därför är det en definierande egenskap i vilken riktningen av flex-artiklar är inställd. Värdena kan vara rad (standard), rad-omvänd, kolumn, och kolumn-omvänd.
De flex-wrap fast egendom:
Om du försöker öka antalet flex-artiklar inuti flex-behållare, kommer de alla att försöka passa på en rad som standard. Du kan ändra detta genom att ställa in flex-wrap egenskap för att slå in objekten i flera rader inuti den överordnade behållaren. Den accepterar tre värden: nurap (standard), slå in, och wrap-reverse.
De flex-flöde fast egendom:
Nu känner du till flexcontainerns huvud- och tväraxel. De flex-flöde egenskap kombinerar de två axlarna till en som det är en förkortning för flex-riktning och flex-wrap egenskaper. Därför är standardvärdet rad nurap, och du är free att experimentera vidare.
De motivera-innehåll fast egendom:
De motivera-innehåll egenskapen används för att justera underordnade objekt i en överordnad flex-behållare. Allt innehåll är justerat baserat på huvudaxeln. Men om vi anger en viss höjd eller bredd för dessa föremål, motivera-innehåll kommer att bete sig annorlunda. Det viktigaste är att ha tillräckligt med utrymme inuti den överordnade behållaren innan du testar motivera-innehåll och align-objekt egenskaper.
De motivera-innehåll egenskap gör justering på fem olika sätt:
justify-content: flex-start;
Detta är standardvärdet. Alla objekt är justerade i början av den överordnade behållaren, dvs överst till vänster på den överordnade behållaren.
justify-content: center;
Alla föremål är packade i mitten av föräldrabehållaren.
justify-content: flex-end;
Alla objekt flyttas till slutraden i den överordnade behållaren.
justify-content: space-between;
Alla poster är jämnt fördelade på raden, med den första posten i början och den sista posten i slutet.
justify-content: space-around;
Alla föremål har lika stort utrymme på vänster och höger sida. Observera att det första och det sista föremålet kommer att ha en utrymmesenhet mot behållarens kant, men två utrymmesenheter mellan den angränsande flex-artikel.
De align-objekt fast egendom:
Justera objekt liknar motivera-innehåll med en liten skillnad. Här justeras alla objekt baserat på tväraxeln (vinkelrätt mot huvudaxeln).
align-objekt accepterar fem olika värden:
align-items: stretch;
Detta är standardvärdet. Alla föremål sträcker sig för att fylla behållaren.
align-items: flex-start;
Alla föremål packas i början av containern (tväraxeln).
align-items: center;
Alla föremål är packade till mitten av flex-innehållr i tväraxeln.
align-items: flex-end;
Alla föremål packas till slutet av behållaren (tväraxeln).
align-items: baseline;
Alla objekt är justerade på ett sådant sätt att deras baslinjer (texter) är justerade.
De anpassa-innehåll fast egendom:
Se till att flex-behållare har objekt på flera rader, och flex-wrap egenskapen är inställd på antingen slå in eller wrap-reverse att bevittna anpassa-innehåll fast egendom. Det är nödvändigt eftersom som motivera-innehåll egenskapen anpassas flex-artiklar inom huvudaxeln, den anpassa-innehåll egenskap justerar dessa linjer i tväraxeln (när det finns lite extra utrymme).
Flexbox-egenskaper för Flex-artiklar
De anpassa sig fast egendom:
Det låter dig justera anpassningen av en individ flex-artikel. Den har alla egenskaper align-objekt som vi satt i flex-behållare. Du kan använda den för att ändra positionen för en singel flex-artikel utan att störa de andra närliggande föremålen. Den accepterar sex värden: bil, flex-start, flex-ände, Centrum, baslinje, sträcka.
De beställa fast egendom:
Använda beställa egenskap, kan du styra ordningen på flexobjekt som visas i en flex-behållare genom att ge enskilda föremål en högre eller lägre ordning. Som standard läggs alla objekt ut i källordningen.
De flex-växa fast egendom:
Den definierar den rumsliga fördelningen av flex-artiklar inuti flex-behållare. Till exempel föremål med flex-växa egenskapen inställd på “2” kommer att försöka ta upp dubbelt så mycket utrymme som de andra. Observera att den inte accepterar negativa värden.
De flex-krympa fast egendom:
Som standard är den inställd på 1. Du kan göra flex-artikel krympa vid behov.
De flex-bas fast egendom:
När du vill storlek flex-artiklar, särskilt med bredd, brukar du inte använda bredd egendom utan istället flex-bas. Som standard är den inställd på bil.
De böja fast egendom:
Det är en förkortning för flex-växa, flex-krympa, och flex-bas egenskaper, där de två sista egenskaperna är valfria. Det betyder att om du ställer in böja egenskapen till “1”, sedan flex-växa kommer att ställas in på en stund flex-krympa och flex-bas kommer att ha standardvärdet. Det rekommenderas att använda den här stenografiska egenskapen istället för att ta upp plats med alla dessa enskilda egenskaper.
CSS: Designa din webbplats med stil
Vi vet att det finns mycket att ta in, och vi är säkra på att du är redo att dyka in i att använda Flexbox i dina egna projekt. Men vi skrapar bara på ytan av vad Flexbox kan göra!
CSS finns överallt. Från att ställa in din webbplats bakgrundsbild till att designa layouter med CSS flexbox, det har revolutionerat sättet vi hanterar webben på. Alla dessa viktiga egenskaper kommer att vara mycket användbara i din webbutvecklingsresa. Du kan till och med använda det du lärde dig i den här artikeln för att komma igång med att skapa fantastiska responsiva layouter. Glad kodning!
Om författaren
Naincy Mourya (19 artiklar publicerade)
Naincy är specialiserat på att bygga mycket responsiva webbplatser och effektiv innehållsstrategi tillsammans med webbkopior. Hon är en frilansande teknikskribent som håller ett skarpt öga på trendteknologi.
Mer från Naincy Mourya
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
