CSS flex

• Szerző: Sallai András
• Copyright © Sallai András, 2020
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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;
}

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;
}

<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;
}

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

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

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;
}

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

<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;
}

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

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

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

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

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

.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>

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

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

.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:

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

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

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

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

Egyéb:

• https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

A tartalom igazítása soronként.

.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:

Középre:

Elejére:

Végére:

Egyenletes elosztás:

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

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:

.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>