Flexbox ali »Flexible Box Layout Module« je CSS značka, ki je namenjena boljšemu pozicioniranju elementov znotraj določenega okvirja. Pozicinoniranje s pomočjo flexboxa je možno tudi v primerih, ko je širina okvirja neznana ali dinamična (zato ima v imenu besedo »flex«).
Uporaba Flexboxa tako zagotavlja ustrezno pozicioniranje elementov, ko se slednji prilagajajo različnim ekranom oz. napravam. Flexbox omogoča spreminjanje elementov znotraj okvirja po širini/višini in vrstnemu redu, da kar najbolje zapomnimo prostor, ki je nam na voljo. Elementi se temu primerno širijo ali krčijo, da preprečijo »podiranje«. Sredinsko centriranje po višini in širini je v Flexboxu zelo enostavno.
Primer Flexbox-a v praksi
<div class="parent">
<div class="child"></div>
<div class="child grow"></div>
<div class="child grow-2"></div>
</div>.parent {
background-color: #f60;
display: flex;
height: 180px;
align-items: center;
justify-content: center;
padding: 20px;
}
.child {
background-color: #333;
height: 100px;
width: 100px;
margin: 20px;
}
.grow {
flex-grow: 4;
}
.grow-2 {
flex-grow: 1;
}Flexbox je namenjen izgradnji posameznih komponent, npr. modulu za prijavo, iskanje, … se pravi manjšim sklopom. Flexbox ni primeren za pripravo večjih postavitev, za slednje je bila razvita CSS značka Grid.
Ali lahko Flexbox že uporabimo?
Flexbox ima danes že zelo široko podporo, težave imamo lahko le pri brskalniku IE, kjer je potrebno zagotoviti ustrezno alternativo.
Dodatni viri:
- Izčrpen pregled Flexboxa – A Complete Guide to Flexbox
- Osnoven pregled – CSS3 Flexible Box