[[:oktatas:web:css|< CSS]] ====== CSS flex ====== * **Szerző:** Sallai András * Copyright (c) Sallai András, 2020 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] * Web: https://szit.hu ===== A CSS flexbox ===== A CSS flexbox a display tulajdonság számára megadható újabb érték, amivel megszervezhetjük a dobozaink elrendezését. A beállítást a szülő elemen kell beállítani, a display számára a "flex" értéket megadva. A következő példában flex beállítás eredményét láthatjuk:




    
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
    
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
    
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


.burkolo {
    display: flex;
}

.egy {
    padding: 10px;
    background-color: orange;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

A három doboz vízszintesen egyenletesen kitölti a rendelkezésre álló helyet. Most nézzük, meg olyan esetet, amikor a tartalom kevés.




    
        Lorem 1
    
    
        Lorem 2
    
    
        Lorem 3


.burkolo {
    display: flex;
}

.egy {
    padding: 10px;
    background-color: orange;
}

Lorem 1

Lorem 2

Lorem 3

===== Arány meghatározása =====



    
        Lorem1
    
    
        Lorem2


.burkolo {
    display: flex;
}

.burkolo div {
    padding: 10px;
}

.burkolo .elso {
    flex: 1;
    background-color: green;
}

.burkolo .masodik {
    flex: 2;
    background-color: orange;
}

Lorem1

Lorem2



    
        Lorem 1
    
    
        Lorem 2
    
    
        Lorem 3


.burkolo {
    display: flex;
    flex-direction: row-reverse;
}

.egy {
    padding: 10px;
    background-color: orange;
}

Lorem 1

Lorem 2

Lorem 3



    Lorem1
    Lorem2
    Lorem3


.burkolo {
   display: flex;
   justify-content: center;
   border: 1px solid navy;
}
.burkolo div {
    background-color: orange;
    padding: 10px;
}

Lorem1

Lorem2

Lorem3

Végére igazítva (flex-end):

Lorem1

Lorem2

Lorem3

Elejére igazítva (flex-start):

Lorem1

Lorem2

Lorem3

Soron belül, hely a dobozok között (space-between):

Lorem1

Lorem2

Lorem3

Soron belül, hely a dobozok között, két elemmel(space-between):

Lorem1

Lorem2

Soron belül, hely a dobozok előtt és utánaközött (space-around):

Lorem1

Lorem2

Lorem3


.burkolo008 {
   display: flex;
   flex-wrap: nowrap;
   border: 1px solid navy;
   width: 200px;
}
.burkolo008 div {
    background-color: orange;
    padding: 10px;
}



    Lorem1
    Lorem2
    Lorem3
    Lorem4
    Lorem5

Lorem1

Lorem2

Lorem3

Lorem4

Lorem5

A tördelés engedélyezve (wrap)

Lorem1

Lorem2

Lorem3

Lorem4

Lorem5

A tördelés engedélyezve, fordított sorrendben (wrap-reverse)

Lorem1

Lorem2

Lorem3

Lorem4

Lorem5


.burkolo {
   display: flex;
   align-items: stretch;
   border: 1px solid navy;
   width: 200px;
   height: 300px;
}
.burkolo div {
    background-color: orange;
    padding: 10px;
}



    Lorem1
    Lorem2
    Lorem3

Nyújtás:

Lorem1

Lorem2

Lorem3

Középre igazítás (center):

Lorem1

Lorem2

Lorem3

Igazítás a konténer elejére (flex-start):

Lorem1

Lorem2

Lorem3

Igazítás a konténer végére (flex-end):

Lorem1

Lorem2

Lorem3

Igazítás a konténer alapvonalához (baseline):

Lorem1

Lorem2

Lorem3


.burkolo {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    border: 1px solid navy;
    width: 72px;
    height: 300px;
}
.burkolo div {
    background-color: orange;
    padding: 10px;
    height: 30px;
}



    Lorem1
    Lorem2
    Lorem3

Nyújtás:

Lorem1

Lorem2

Lorem3

Középre:

Lorem1

Lorem2

Lorem3

Elejére:

Lorem1

Lorem2

Lorem3

Végére:

Lorem1

Lorem2

Lorem3

Egyenletes elosztás:

Lorem1

Lorem2

Lorem3

Egyenletes elosztás, mindkét végén egy rész hellyel kiegészítve:

Lorem1

Lorem2

Lorem3

===== A flex-grow ===== A flex-grow tulajdonsággal megadhatjuk, hogy egy elem mennyit növekedjen ugyanazon tárolóban lévő többi rugalmas elemhez képest. A következő értéket veheti fel: | szám | Egy szám, amely megmondja \\ az elem mennyi fog nőni \\ a többi rugalmas elemhez képest. \\ Alapértelmezés 0. |


.burkolo {
   display: flex;
   border: 1px solid navy;
}
.burkolo div {
    background-color: orange;
    padding: 10px;
    border: 3px solid red;
}
.burkolo div.e1 {
    flex-grow: 1;
}
.burkolo023 div.e2 {
    flex-grow: 2;
}
.burkolo023 div.e3 {
    flex-grow: 1;
}



    Lorem1
    Lorem2
    Lorem3

Lorem1

Lorem2

Lorem3