Rugalmas dobozok

Mi az a rugalmas dobozok
A Flexbox, vagy rugalmas dobozok egy lineáris elem rendezési metódus. Egy konténer elemeit lehet vele sorba, vagy oszlopba rendezni. Az elemek méretét, helyzetét, sorrendjét rugalmasan szabályozhatjuk. Ehhez a konténer megjelenítés (display) értékét kell flex-re állítani:
1
div {
2
    display: flex;
3
}
Copied!
Rugalmas irány - flex-direction
A flex-direction CSS szabállyal adhatjuk meg a rugalmas elemek rendeződésének
​ fő irányát (fő tengely).
Sor - row
Sorba rendezve az elemek vízszintesen rendeződnek egy sorba, és sorrendben balról jobbra következnek eymás után. Ez az alapértelmezett beállítás.
1
.row {
2
    flex-direction: row;
3
}
Copied!
Fordított sor - row-reverse
Ugyanaz mint a sor, csak az elemek jobbról balra rendeződve jönnek egymás után a sorrendjük szerint.
1
.row-reverse {
2
    flex-direction: row-reverse;
3
}
Copied!
Oszlop - column
Az elemek függőleges oszlopba rendezve jelennek meg, sorrendjük szerint fentről lefelé.
1
.column {
2
    flex-direction: column;
3
}
Copied!
Fordított oszlop
Ugyanúgy mint az oszlop esetében, a fordított oszlopban nis függőlegesen rendezve jelennek meg az elemek, de a sorrendjük szerint lentről fölfelé alakul a sorrendjük.
1
.column-reverse {
2
    flex-direction: column-reverse;
3
}
Copied!
Rugalmas törés - flex-wrap
A flex-wrap szabályozza az elemek több sorba törését. Ha nincs törés, az elemek összenyomódnak, és arra törekednek, hogy elférjenek egy sorban.
Nincs törés - no-wrap
Alapesetben az elemek egy sorban helyezkednek el, és rugalmasan összenyomódnak.
1
.nowrap { 
2
    flex-wrap: nowrap;
3
}
Copied!
Törés - wrap
A törés engedélyezése esetén, ha elfogy az elemek helye egy sorban, akkor új sorba törnek.
1
.wrap { 
2
    flex-wrap: wrap;
3
}
Copied!
Fordított törés - wrap-reverse
A elemeink törhetnek még fölfelé is.
1
.wrap-reverse { 
2
    flex-wrap: wrap-reverse;
3
} 
Copied!
Tartalom rendezése - justify-content
A justify-content határozza meg, hogy merre rendeződjenek az elemek a rugalmas konténerben, illetve hogy a közöttük lévő térközöket hogyan számolja ki a böngésző.
Némi hasonlóságot mutat a szöveg rendezéssel (text align) csak itt nem szövegsorokat rendezünk balra, vagy jobbra, esetleg középre, hanem rugalmas elemeket.
Kezdőponthoz rendezés - flex-start
Végponthoz rendezés - flex-end
Középre rendezés - center
Eltartás az elemek közé - space-between
Eltartás az elemek közé - space-around
Egyenlő eltartás - space-evenly
Elemek igazítása - align-items
...
Sorok, oszlopok igazítása - align-content
...
Rugalmas elemek tulajdonságai
...
Sorrend - order
...
Rugalmas nyúlás - flex-grow
...
Rugalmas összehúzódás - flex-shrink
A flex-shrink tulajdonság határozza meg, hogy a többi elemhez képest mekkora mértékben húzódjon össze az adott elem.
Önigazítás - align-self
Az align-self ugyan úgy működik, mint az align-items (elemek igazítása), csak ez egyetlen elemre vonatkozik.
1
.flex-start {
2
  align-self: flex-start;
3
}
4
​
5
.flex-end {
6
  align-self: flex-end;
7
}
8
​
9
.center {
10
  align-self: center;
11
}
12
​
13
.stretch {
14
  align-self: stretch;
15
}
16
​
17
.baseline {
18
  align-self: baseline;
19
}
Copied!
Ábra
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​

Last modified 2yr ago