# 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: ```css div { display: flex; } ``` ## 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. ![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-Ln7hiZRacV0uVCtidMh%2F-Ln7i5OsYGR4HSna-S-K%2Fflex-directon-row.png?alt=media\&token=65fdb8d5-4308-442c-a243-657f32efc658) ```css .row { flex-direction: row; } ``` ### 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. ![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-Ln7hiZRacV0uVCtidMh%2F-Ln7idyApvMjjDBpOrk5%2Fflex-direction-rov-reverse.png?alt=media\&token=993f8aae-4d96-452e-b89d-3a6e11928a02) ```css .row-reverse { flex-direction: row-reverse; } ``` ### Oszlop - column Az elemek függőleges oszlopba rendezve jelennek meg, sorrendjük szerint fentről lefelé. ![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-Ln7hiZRacV0uVCtidMh%2F-Ln7j9DIsg55GYnR7fN3%2Fflex-direction-column.png?alt=media\&token=f192772f-f1f6-4e8a-bd7e-fcc64512b670) ```css .column { flex-direction: column; } ``` ### 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. ![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-Ln7hiZRacV0uVCtidMh%2F-Ln7jW8MbRtniC9qrmJu%2Fflex-direction-column-reverse.png?alt=media\&token=1b5ed109-537a-4b33-91f0-6e37f9ec6375) ```css .column-reverse { flex-direction: column-reverse; } ``` ## 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. ![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-Ln8Ar5lIbWu3UCf-rhn%2F-Ln8B4N9TSwDDCbZQNEy%2Fflex-wrap-nowrap.png?alt=media\&token=3fbadcc1-6529-4860-b137-ca25b82384b3) ```css .nowrap { flex-wrap: nowrap; } ``` ### **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. ![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-Ln8A6zL1ZEPTdfOdDc7%2F-Ln8AYuRiaIY-3JGNSwA%2Fflex-wrap-wrap.png?alt=media\&token=0ddec2b3-69fa-43f7-8058-50654dc0df58) ```css .wrap { flex-wrap: wrap; } ``` ### **Fordított törés - wrap-reverse** A elemeink törhetnek még *fölfelé* is. ![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-Ln8A6zL1ZEPTdfOdDc7%2F-Ln8AkQ4zKXHEIV-TUlN%2Fflex-wrap-wrap-reverse.png?alt=media\&token=460b4700-b786-481f-9eb6-b1c81329da14) ```css .wrap-reverse { flex-wrap: wrap-reverse; } ``` ## 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 ![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-Ln8Ar5lIbWu3UCf-rhn%2F-Ln8EUK01BPkFAOxnwU9%2Fjustify-content-flex-start.png?alt=media\&token=9800190f-b46e-4dc5-9a11-59d6d007a1f8) ### **Végponthoz rendezés - flex-end** ![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-Ln8Ar5lIbWu3UCf-rhn%2F-Ln8EXWVN4x8PcZMzsbb%2Fjustify-content-flex-end.png?alt=media\&token=fb8a0de9-5192-4ad9-867b-ea13665ca23c) ### **Középre rendezés - center** ![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-Ln8Ar5lIbWu3UCf-rhn%2F-Ln8E_tepHovfQIPoQky%2Fjustify-content-center.png?alt=media\&token=d49a5e43-25a1-49eb-9b73-ad6eb28e45b8) ### **Eltartás az elemek közé - space-between** ![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-Ln8Ar5lIbWu3UCf-rhn%2F-Ln8EdR7Eh-3M5_t_c0L%2Fjustify-content-space-between.png?alt=media\&token=0a69500a-73be-406a-b515-87a19c6a9ced) ### **Eltartás az elemek közé - space-around** ![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-Ln8Ar5lIbWu3UCf-rhn%2F-Ln8EgNYKKkx6Nhu-jHq%2Fjustify-content-space-around.png?alt=media\&token=af86a793-246d-4f36-9867-4903c80f3a60) ### **Egyenlő eltartás - space-evenly** ![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-Ln8Ar5lIbWu3UCf-rhn%2F-Ln8EjFbQ6QvdPOIaMoK%2Fjustify-content-space-evenly.png?alt=media\&token=18f1b06d-d6cb-4f99-9c6f-e0465bbde616) ## 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](#elemek-igazitasa-align-items)), csak ez egyetlen elemre vonatkozik. ![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LoqOaeanueKpRcqGI3q%2F-LoqPj0TbjBEhwV9_xr0%2Falign-self.png?alt=media\&token=5bb477ba-e90c-4909-8dab-82c96302ecae) ```css .flex-start { align-self: flex-start; } .flex-end { align-self: flex-end; } .center { align-self: center; } .stretch { align-self: stretch; } .baseline { align-self: baseline; } ``` ## Ábra ![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-Lm11QE4yCBpjQycsYX2%2F-Lm12RMg36Wz6EhPiOvW%2Fflexbox.png?alt=media\&token=47f4be67-3d2c-477e-b5a7-ebe19efd0532)