Tartalomjegyzék

< CSS

CSS flex

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:

<div class="burkolo">
 
    <div class="egy">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="egy">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="egy">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
 
</div>
.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.
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.

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.

<div class="burkolo">
 
    <div class="egy">
        Lorem 1
    </div>
    <div class="egy">
        Lorem 2
    </div>
    <div class="egy">
        Lorem 3
    </div>
 
</div>
.burkolo {
    display: flex;
}
 
.egy {
    padding: 10px;
    background-color: orange;
}

Lorem 1
Lorem 2
Lorem 3

Arány meghatározása

<div class="burkolo">
    <div class="elso">
        Lorem1
    </div>
    <div class="masodik">
        Lorem2
    </div>
</div>
.burkolo {
    display: flex;
}
 
.burkolo div {
    padding: 10px;
}
 
.burkolo .elso {
    flex: 1;
    background-color: green;
}
 
.burkolo .masodik {
    flex: 2;
    background-color: orange;
}

Lorem1
Lorem2

A flex-direction

A flex-direction beállítással változtatható az elemek elrendezésének iránya.

A következő értéket lehetségesek:

row alapértelmezés
row-reverse
column
column-reverse

A row érték az alapértelmezés.

<div class="burkolo">
    <div class="egy">
        Lorem 1
    </div>
    <div class="egy">
        Lorem 2
    </div>
    <div class="egy">
        Lorem 3
    </div>
</div>
.burkolo {
    display: flex;
    flex-direction: row-reverse;
}
 
.egy {
    padding: 10px;
    background-color: orange;
}

Lorem 1
Lorem 2
Lorem 3

A elemek jobbra, fordított sorrendben rendeződnek.

Justify-content

flex-start Alapértelmezés
A részek a doboz elejéhez igazodnak.
flex-end A részek a doboz végéhez igazodnak.
center A részek a doboz közepére igazodnak.
space-between A soron belül a dobozok között hely.
space-around A doboz előtt és utána is hely.
<div class="burkolo">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
.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

A flex-wrap

nowrap Alapértelmezett érték
A rugalmas rész ne legyen törve
wrap Legyen törve, ha szükséges.
wrap-reverse Legyen törve, ha szükséges, fordított sorrendben
.burkolo008 {
   display: flex;
   flex-wrap: nowrap;
   border: 1px solid navy;
   width: 200px;
}
.burkolo008 div {
    background-color: orange;
    padding: 10px;
}
<div class="burkolo008">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
    <div>Lorem4</div>
    <div>Lorem5</div>
</div>

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

Az align-items

stretch Alapértelmezett érték. Nyújtás.
center A konténerben középre van igazítva.
flex-start A konténer kezdetéhez igazítás.
flex-end A konténer végéhez igazítva.
baseline A konténer alapvonalához igazítva.
.burkolo {
   display: flex;
   align-items: stretch;
   border: 1px solid navy;
   width: 200px;
   height: 300px;
}
.burkolo div {
    background-color: orange;
    padding: 10px;
}
<div class="burkolo">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>

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

Egyéb:

Az align-content

A tartalom igazítása soronként.

stretch Alapértelmezett érték. Nyújtás.
center A konténerben középre van igazítva.
flex-start A konténer kezdetéhez igazítás.
flex-end A konténer végéhez igazítva.
space-between A sorok egyenletes elosztása a konténerben.
space-around A sorok egyenletes elosztása,
a részek mindkét végén van hely kihagyva.
.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;
}
<div class="burkolo">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>

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;
}
<div class="burkolo">
    <div class="e1">Lorem1</div>
    <div class="e2">Lorem2</div>
    <div class="e3">Lorem3</div>
</div>

Lorem1
Lorem2
Lorem3