Display egenskapen kan ha olika värden, en av dessa värden är Flex. Det som vi gör med Flex i CSS är att vi skapar det som kallas för flexbox. Tänk dig att du har skapat en div och i den diven tänker du ha till exempel olika paragrafer. Genom flex kan du styra hur dessa paragraferna ska ligga i diven. Med finare ord så kan vi säga att flex i CSS, ger oss möjligheten för att styra behållarens innehåll (flex objekt). Detta sker utmed en huvudaxel (Main axel), Main axeln kan börja från höger till vänster och i Cross axel kan den börja från topp till botten av sidan.
Viktigt att säga, att detta gäller om du har valt row i flex-direction, som vi kommer att förklara lite senare. Därför säger vi att flex är en dimension. Detta säger man eftersom den kan hantera layouten i en dimension åt gången, antingen som en row(rad) eller som en column(kolumn). Motsatsen för Grid.
För att du ska kunna skapa en flex container, så behöver du ange displayens värde till flex. Då blir alla objekt behandlade i den containern som flex objekt, och det är också möjligt att styra deras layout.
I bilden ovan gav jag Ul listan display flex. På det sättet så kommer alla ”elementen” som jag har i listan att bli behandlade som flex objekt. I koden ovan har jag också styrt hur dessa flex objekt ska ligga. Det gör jag genom flex-direction. Så när du använder flex display, finns det andra regler som du kan använda dig av för att få det resultatet du önskar.
Flex Direction
Flex-direction använder man för att styra containerns innehålls riktning. Antingen så ligger alla flex objekten i rad, eller i kolumn. Beroende på vad du väljer kommer Main axel och Cross axel att bli påverkade.
När du har din flexbox riktning i rad, då kommer Main axel och vara precis som du ser på bilden ovan. Men när man har kolumn riktning. Då byter Main axel och cross axel plats och kommer att se ut så här:
Detta är viktigt att hålla koll på, eftersom detta kommer att hjälpa dig med att räkna ut ”matematiskt” hur mycket plats du kommer att ha för din flexbox i webbsidan.
Det finns andra värden som man kan använda i flex-direction, liksom row-reverse och kolumn-reverse. Det som händer när man använder sig av dessa två värden är precis som det står i namnet, först blir sist och sist blir först. Box B blir till exempel först och box A blir sist.
Flex Shorthand
Shorthand som finns för flex är flex-grow, flex-shrink och flex-basis. De tre viktiga egenskaperna använder man i sammanband med flexboxen.
- Flex-grow: genom att använda den egenskapen, så säger vi till hur stor del elementet får öka om det finns plats över i behållaren ”containern”. värdet på flex-grow anges med ett decimaltal.
- Flex-shrink: Här säger vi hur stor andel elementet får minska, om inte alla objekt ryms i containern.
- Flex-basis: Den ställer in storleken på containern om inte något annat anges med box-sizing.
Flex-Wrap
Egenskapen ställer in om flex objekt ska ligga på en rad, eller om de ska ligga på flera rader. Flex-Wrap kan sättas till nowrap, wrap eller wrap-reverse.
Du kan kombinera de två egenskaperna Flex-wrap och Flex-direction till shorthande, flex-flow. Syntax ser ut så här:
Justify-content
Med justify-content så kan vi justera hur flex behållarens innehåll ska placeras ut längs med flex-axeln. De värdena som finns att använda i justify-content är space-between, space-around, center, flex-end eller flex-start.
När du väljer att ange justify-content till center, så blir alla objekt centrerade i mitten av den flexboxen. Men ibland så kan det bli så att alla objekt sitter så tätt intill varandra och då rekommenderar jag att använda egenskapen gap, där du kan sätta utrymme mellan alla flex objekt du har. Detta är motsats för värdena space-between och space-around, där du antigen anger att alla objekt har lika mycket utrymme mellan de, eller omkring de.
Det finns olika hemsidor för att träna på flex och alla andra egenskaper som man ska använda i sammanband med Flex i CSS, liksom justify-content och align-objekt. Jag rekommenderar Frog spelet, där kan du träna på de olika värdena och förstå hur du ska använda dem.
Lämna ett svar