CSS FlexBox er en del af CSS3 modulet, som giver en mere effektiv måde at organisere og justere elementer på en hjemmeside. Med FlexBox kan man nemt ændre rækkefølgen og placeringen af elementer på siden, såvel som deres størrelse og afstand.
FlexBox bruges ved at definere en container, som indeholder de elementer, man ønsker at style. Ved at tilføje forskellige FlexBox egenskaber til containeren, kan man justere placeringen og størrelsen af elementerne i containeren.
Eksempelvis kan man bruge display: flex til at ændre containeren til en flex container, og derefter bruge flex-direction til at ændre retningen af elementerne (f.eks. fra vandret til lodret eller omvendt). Man kan også bruge justify-content og align-items til at justere placeringen af elementerne i containeren.
FlexBox kan også bruges til at skabe responsive designs, da man kan ændre størrelsen og placeringen af elementerne baseret på skærmstørrelsen. Dette gøres ved at tilføje forskellige media queries til CSS koden.
Alt i alt er CSS FlexBox en kraftfuld teknologi, som kan hjælpe med at gøre stylingen af en hjemmeside mere effektiv og fleksibel.
Her er et simpelt eksempel på, hvordan man kunne bruge Flexbox i CSS:
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
}
I denne kode, vil .container være vores Flex container. Vi bruger display: flex; til at gøre det til en Flex container. justify-content: space-between; vil sørge for, at der er lige meget plads mellem hver .item.
Hver .item i .container vil have flex: 1;. Dette betyder, at hver .item vil tage lige meget plads i .container.