Flexbox - grunder

Det nya, moderna sättet att skapa layout är att använda sig av flexbox. Många äldre webbläsare klarar inte av flexbox och det fanns en flexbox-standard som inte är kompatibel med nuvarande standard. Flexbox löser dock så många problem och förenklar så mycket att det är väl värt att använda sig av denna standard så mycket som möjligt, speciellt på nya sidor som inte riktar sig mot de som använder uråldriga webbläsare (ja, det går lite grann emot att man ska vara så inkluderande som möjligt...)

Problem som flexbox löser på ett excellent sätt är bland annat: kolumner som har samma höjd, centrering av element (såväl horisontellt som vertikalt) och det ger oss också layouter som är långt mer robusta och som inte "trillar" isär. Om du hållit på med traditionell webbutveckling, så vet du att detta är problem som kan kräva mycket extra kod. Om du är nybörjare, så tro mig, du kommer att tjäna in så mycket tid och bespara dig massvis med huvudbry om du använder flexbox redan ifrån början.

Så nog med brasklappar, låt oss börja använda flexbox!

Flexbox

Som man hör på namnet är flexbox till för att på ett flexibelt sätt hantera boxar och därmed layout. Med hjälp av flexbox kan man låta webbläsaren sköta mycket av placeringen av element och när man kör på olika enheter eller när man ändrar storlek på webbläsarfönstret kommer flexbox att fixa om layouten automatiskt. Flexbox fungerar speciellt bra på enheter som har liten skärm.

Terminologi

Allt som ska hanteras av flexbox, placeras i en flex-behållare. Detta kommer att vara föräldraelementet som alla flex-avkomlingar placeras i.

Flex-element är de barn/avkomlingar som placeras i flex-behållaren. Om du lägger "ren" text inuti en flex-behållare kommer denna att placeras i ett "osynligt" flex-element automatiskt. Du behöver med andra ord in skapa alla flex-element själv, en del skapas helt automatiskt.

Flex-axel är den axel längsmed flex-elementen placeras. Det finns även en korsaxel som är förskjuten 90 grader mot flex-axeln.

Att skapa en flexbox

För att skapa en flexbox sätter vi dess display-egenskap till antingen flex eller inline-flex, t.ex. så här:

.flexLåda {
  display: flex;
}

Detta sätter flexLåda-klassen till en flex-behållare och anger samtidigt att alla underelement inuti flexLåda ska vara flex-element.