Flexbox

Layoutens silvertejp

Samtliga exempel följer denna grundläggande html konstruktion.

css klasser används sedan för att lägga till och ta bort stilar, css egenskaper.

<div class="flex-container">
    <div>
        <h1>1</h1>
    </div>
    <div>
        <h1>2</h1>
    </div>
    <div>
        <h1>3</h1>
    </div>
</div>

Värt att nämna är att i varje underliggande div, de med h1 element och siffror så används flex för att centrera texten.

.flex-container__item {
    display: flex;
    justify-content: center;
    align-items: center;
  }

Utan flexbox

Divar utan flexbox.

1

2

3

Med flexbox default

Här är enbart display:flex satt, så det är standardinställningar. Flex-direction är row som standard, så den placerar innehållet på en rad (horizontell, row). Flex huvud-axel är alltså horizontell i detta exempel.

Elementens bredd (width) är, 20%.

Det här kan du använda när du vill att element ska placeras brevid varandra.

.flex-container {
    display: flex;
}

1

2

3

Justify-content

Justify-content för att placera boxarna på raden. Default är flex-start.

Det finns ett stort antal val för justify-content, öppna utvecklarverktygen i webbläsaren (F12) och testa. Kom ihåg att både justify-content och align-items är beroende av vilken flex-direction som används, alltså flex huvud-axel.

.flex-container--end {
    justify-content: flex-end;
}

1

2

3

.flex-container--space-between {
    justify-content: space-between;
}

1

2

3

Align-items

Flex huvud-axel är som standard horizontell, den andra axeln är då vertikal. Align-items är för att placera elementen på axeln.

1

2

3

Precis som för justify-content finns det ett stort antal val för align-items, öppna utvecklarverktygen i webbläsaren (F12) och testa. Kom ihåg att både justify-content och align-items är beroende av vilken flex-direction som används, alltså flex huvud-axel.

.flex-container--align-center {
    align-items: center;
}

1

2

3

Flex-direction

Med flex direction kan vi ändra vilken riktning flex huvud-axel ska ha, row eller column. Standard är som tidigare nämnt column.

.flex-container--row-reverse {
    flex-direction: row-reverse;
}

1

2

3

Flex-direction är row som standard, ändrar vi den till column så staplas de underliggande elementen på varandra.

När du ändrar flex direction så byter justify-content och align-items plats.

.flex-container--column {
    flex-direction: column;
}

1

2

3

Flex-grow

Flex-grow bestämmer hur mycket plats ett element får ta av den container som det ligger i. Standard inställningen är 0. Du kan observera denna funktionalitet i alla tidigare exempel här på sidan.

Kontrollera detta med flex-grow egenskapen. I det här exemplet så tar nu element 2 all plats som finns kvar efter att element 1 och 3 fått sin bredd (width) som är 20%.

.flex-item {
    flex-grow: 1;
}

1

2

3

Med flex-grow: 1 på element 1 och 2 så delar dessa två element på den plats som finns kvar efter att element 3 tagit 20%.

Med flex grown kan du alltså kontrollera vad som händer med den plats som blir över.

1

2

3

Flex-wrap

Med flex-wrap kontrolleras om innehållet i containern ska byta rad, default är nowrap. Om du ändrar den till wrap så kommer elementen att byta rad när innehållet är större än containern. Det är alltså baserat på elementens bredd (width).

.flex-container--wrap {
    flex-wrap: wrap;
}
.flex-container__item--50 {
    width: 50%;
}

1

2

3

Flex-gap

Alla dessa exempel är utan margin på element, just margin och padding kan ställa till det eftersom ett elements storlek är baserat på box-modellen (om du inte känner till den så läs på, viktigt!).

Om du önskar en marginal mellan alla element i din flex container så kan du använda dig av flex-gap.

Det går även utmärkt att använda tillsammans med flex-grow och de andra egenskaperna.

.flex-container {
    gap: 1rem;
}

1

2

3

För att styra gap så kan du använda det på row eller column.

.flex-container {
    row-gap: 1rem;
    column-gap: 1rem;
}