Flexbox Működésének Bemutatása

A Flexbox (Flexible Box Layout) egy modern CSS elrendezési módszer, ami megkönnyíti a reszponzív design kialakítását. Ez az oldal bemutatja a legfontosabb Flexbox tulajdonságokat és azok használatát.

Flex Container Tulajdonságok

display: flex

A display: flex tulajdonság egy konténert flex konténerré alakít. Az elemei automatikusan flex itemekké válnak.

1
2
3
.container { display: block; }

flex-direction

A flex-direction meghatározza a flex itemek elrendezésének fő irányát.

1
2
3
.container { display: flex; flex-direction: row; }

justify-content

A justify-content meghatározza, hogyan helyezkedjenek el az elemek a fő tengely (main axis) mentén.

1
2
3
.container { display: flex; justify-content: flex-start; }

align-items

Az align-items meghatározza, hogyan helyezkedjenek el az elemek a kereszttengely (cross axis) mentén.

1
2
3
.container { display: flex; align-items: stretch; }

flex-wrap

A flex-wrap meghatározza, hogy az elemek több sorba/oszlopba törhetnek-e, ha nem férnek el egy sorban/oszlopban.

1
2
3
.container { display: flex; flex-wrap: nowrap; }

gap

A gap tulajdonság meghatározza a flex itemek közötti távolságot.

0px
1
2
3
.container { display: flex; gap: 0px; }

Flex Item Tulajdonságok

flex-grow

A flex-grow meghatározza, hogy egy elem milyen arányban növekedhet a többi elemhez képest, ha van szabad hely.

1
2
3
.item1 { flex-grow: 0; } .item2 { flex-grow: 0; } .item3 { flex-grow: 0; }

order

Az order tulajdonság meghatározza az elemek megjelenési sorrendjét. Az alapértelmezett érték 0.

1
2
3
.item1 { order: 0; } .item2 { order: 0; } .item3 { order: 0; }