Vad är CSS Flexbox?
CSS Flexbox (Flexible Box Layout) är en endimensionell layoutmodell för att fördela utrymme och justera objekt i en rad eller kolumn. Flex-behållaren definieras med display: flex, och dess direkta barn blir flex-objekt. Viktiga behållaregenskaper: flex-direction (rad eller kolumn), flex-wrap (en rad vs. flera rader), justify-content (justering längs huvudaxeln), align-items (justering längs tvärtaxeln per rad) och align-content (justering längs tvärtaxeln av flera rader). Viktiga objektegenskaper: flex-grow (hur mycket ett objekt växer), flex-shrink (hur mycket det krymper), flex-basis (initial storlek) och align-self (åsidosätter align-items i behållaren för ett specifikt objekt). Flexbox är idealiskt för navigeringsfält, kortrader, centrerade layouter och alla endimensionella arrangemang.
Hur man använder CSS Flexbox Generator
-
Justera behållaregenskaperna (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) med hjälp av rullgardinsmenyerna och inmatningsfältet.
-
Klicka på ett objekt i förhandsvisningen för att välja det (blir orange).
-
Ställ in flex-grow, flex-shrink, flex-basis och align-self för det valda objektet i objektpanelen.
-
Klicka på '+ Lägg till objekt' för att lägga till fler objekt; klicka på 'Ta bort' för att radera det valda objektet.
-
Växla mellan CSS- och HTML-flikarna för att se den genererade koden och klicka sedan på Kopiera.
-
Klicka på 'Återställ allt' för att börja om med standardlayouten med 3 objekt.