CSS Tutorial

Flexbox

Viktiga begrepp:

Flex container - En behållare som innehåller flexelement.
Flex items - Elementen inuti en flex-behållare.
Flex direction - Anger flödesriktningen för flexelementen (rad eller kolumn).
Flex wrap - Bestämmer om flexelementen ska brytas till en ny rad eller kolumn.
Align items - Justerar flexelementen vertikalt inom flex-behållaren.
Justify content - Justerar flexelementen horisontellt inom flex-behållaren.

Praktiska steg:

Lägg till display: flex; på flex-behållaren.
Använd flex-direction för att ställa in flödesriktningen.
Använd flex-wrap för att bestämma om elementen ska brytas.
Använd align-items för att justera elementen vertikalt.
Använd justify-content för att justera elementen horisontellt.

CSS-exempel:

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

Detta skapar en flex-behållare med elementen justerade i en horisontell rad, centrerade både horisontellt och vertikalt.

Tips för tillgänglighet:

Använd semantisk HTML-struktur.
Ange aria-label för icke-visuellt innehåll.
Testa med olika skärmläsare och hjälpmedel.

FöregåendePositionering - position