Flexbox - Osnovni layout stranice
Author
Date Published
Flexbox (Flexible Box Layout) je CSS model za efikasno raspoređivanje elemenata unutar kontejnera, čak i kada veličina elemenata nije poznata. Omogućuje poravnanje, distribuciju i upravljanje prostorom između elemenata u horizontalnom ili vertikalnom pravcu.
Glavna Flexbox svojstva (properties)
display: Aktivira flexbox model na kontejneru.
Vrijednosti: flex, inline-flex.
flex-direction: Određuje smjer glavne osi.
Vrijednosti:
row (vodoravno, lijevo-desno, zadano),
row-reverse,
column (okomito, gore-dolje),
column-reverse.
justify-content: Poravnava elemente duž glavne osi.
Vrijednosti:
flex-start (lijevo),
flex-end (desno),
center,
space-between (razmak između elemenata),
space-around (razmak s obje strane elemenata).
align-items: Poravnava elemente duž poprečne osi (vertikalno u row).
Vrijednosti:
stretch (zadano),
flex-start,
flex-end,
center,
baseline.
flex-wrap: Omogućuje prelamanje elemenata na nove redove.
Vrijednosti:
nowrap (svi elementi ostaju u jednom redu),
wrap (prelamaju se na novi red),
wrap-reverse
Primjer upotrebe
Potrebno predznanje:
- identifikatori i klase
- hijerarhija u CSS-u (eksterni, interni, inline)
- dinamička visina/širina kontejnera
- flexbox
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Flexbox Layout</title>7 <style>89 .container {10 display: flex;11 flex-direction: row;12 justify-content: space-around;13 align-items: center;14 height: 100vh;15 background-color: #f0f0f0;16 }1718 .box {19 width: 100px;20 height: 100px;21 background-color: #007bff;22 color: white;23 display: flex;24 justify-content: center;25 align-items: center;26 border-radius: 8px;27 }2829 .box:nth-child(2) {30 background-color: #28a745;31 }3233 .box:nth-child(3) {34 background-color: #ffc107;35 }36 </style>37</head>38<body>39 <div class="container">40 <div class="box">1</div>41 <div class="box">2</div>42 <div class="box">3</div>43 </div>44</body>45</html>46