szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[:oktatas:web:css|< CSS]]

====== CSS flex ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2020
  * Szerkesztve: 2024
  * 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:

<code html>
<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>
</code>

<code css>
.burkolo {
    display: flex;
}

.egy {
    padding: 10px;
    background-color: orange;
}
</code>

<html>
<style>
.burkolo01 {
    display: flex;
}

.egy01 {
    padding: 10px;
    background-color: orange;
}
</style>
<div class="burkolo01">

    <div class="egy01">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="egy01">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="egy01">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>

</div>


</html>

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. 

<code html>
<div class="burkolo">

    <div class="egy">
        Lorem 1
    </div>
    <div class="egy">
        Lorem 2
    </div>
    <div class="egy">
        Lorem 3
    </div>

</div>
</code>

<code css>
.burkolo {
    display: flex;
}

.egy {
    padding: 10px;
    background-color: orange;
}
</code>

<html>
<style>
.burkolo02 {
    display: flex;
    border: 1px solid navy;
}

.egy02 {
    padding: 10px;
    background-color: orange;
}
</style>
<div class="burkolo02">

    <div class="egy02">
        Lorem 1
    </div>
    <div class="egy02">
        Lorem 2
    </div>
    <div class="egy02">
        Lorem 3
    </div>

</div>
</html>


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

<code html>
<div class="burkolo">
    <div class="elso">
        Lorem1
    </div>
    <div class="masodik">
        Lorem2
    </div>
</div>
</code>

<code css>
.burkolo {
    display: flex;
}

.burkolo div {
    padding: 10px;
}

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

.burkolo .masodik {
    flex: 2;
    background-color: orange;
}
</code>


<html>
<style>
.burkolo000 {
    display: flex;
    border: 1px solid navy;
}

.burkolo000 div {
    padding: 10px;
}

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

.burkolo000 .masodik {
    flex: 2;
    background-color: orange;
}
</style>

<div class="burkolo000">
    <div class="elso">
        Lorem1
    </div>
    <div class="masodik">
        Lorem2
    </div>
</div>


</html>

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

<code html>
<div class="burkolo">
    <div class="egy">
        Lorem 1
    </div>
    <div class="egy">
        Lorem 2
    </div>
    <div class="egy">
        Lorem 3
    </div>
</div>
</code>

<code css>
.burkolo {
    display: flex;
    flex-direction: row-reverse;
}

.egy {
    padding: 10px;
    background-color: orange;
}
</code>

<html>
<style>
.burkolo03 {
    display: flex;
    flex-direction: row-reverse;
    border: 1px solid navy;
}

.egy03 {
    padding: 10px;
    background-color: orange;
}
</style>
<div class="burkolo03">

    <div class="egy03">
        Lorem 1
    </div>
    <div class="egy03">
        Lorem 2
    </div>
    <div class="egy03">
        Lorem 3
    </div>

</div>
</html>

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


===== Justify-content =====

Vízszintes igazítás, flex-direction: row; esetén.
Ha flex-direction: column; van beállítva függőleges.

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


<code html>
<div class="burkolo">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
</code>

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



<html>
<style>
.burkolo005 {
   display: flex;
   justify-content: center;
   border: 1px solid navy;
}
.burkolo005 div {
    background-color: orange;
    padding: 10px;
}
</style>

<div class="burkolo005">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
</html>

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

<html>
<style>
.burkolo006 {
   display: flex;
   justify-content: flex-end;
   border: 1px solid navy;
}
.burkolo006 div {
    background-color: orange;
    padding: 10px;
}
</style>

<div class="burkolo006">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
</html>



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

<html>
<style>
.burkolo007 {
   display: flex;
   justify-content: flex-start;
   border: 1px solid navy;
}
.burkolo007 div {
    background-color: orange;
    padding: 10px;
}
</style>

<div class="burkolo007">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
</html>





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

<html>
<style>
.burkolo007_2 {
   display: flex;
   justify-content: space-between;
   border: 1px solid navy;
}
.burkolo007_2 div {
    background-color: orange;
    padding: 10px;
}
</style>

<div class="burkolo007_2">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
</html>


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

<html>
<style>
.burkolo007_4 {
   display: flex;
   justify-content: space-between;
   border: 1px solid navy;
}
.burkolo007_4 div {
    background-color: orange;
    padding: 10px;
}
</style>

<div class="burkolo007_4">
    <div>Lorem1</div>
    <div>Lorem2</div>
</div>
</html>





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

<html>
<style>
.burkolo007_3 {
   display: flex;
   justify-content: space-around;
   border: 1px solid navy;
}
.burkolo007_3 div {
    background-color: orange;
    padding: 10px;
}
</style>

<div class="burkolo007_3">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
</html>

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


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

<code html>
<div class="burkolo008">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
    <div>Lorem4</div>
    <div>Lorem5</div>
</div>
</code>

<html>
<style>
.burkolo009 {
   display: flex;
   flex-wrap: nowrap;
   border: 1px solid navy;
   width: 200px;
}
.burkolo009 div {
    background-color: orange;
    padding: 10px;
}
</style>

<div class="burkolo009">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
    <div>Lorem4</div>
    <div>Lorem5</div>
</div>
</html>

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

<html>
<style>
.burkolo010 {
   display: flex;
   flex-wrap: wrap;
   border: 1px solid navy;
   width: 200px;
}
.burkolo010 div {
    background-color: orange;
    padding: 10px;
}
</style>

<div class="burkolo010">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
    <div>Lorem4</div>
    <div>Lorem5</div>
</div>
</html>

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

<html>
<style>
.burkolo011 {
   display: flex;
   flex-wrap: wrap-reverse;
   border: 1px solid navy;
   width: 200px;
}
.burkolo011 div {
    background-color: orange;
    padding: 10px;
}
</style>

<div class="burkolo011">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
    <div>Lorem4</div>
    <div>Lorem5</div>
</div>
</html>



===== Az align-items =====

Függőleges igazítás flex-direction: column; esetén.
Ha flex-direction: row; van beállítva vízszintes.

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

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

<code html>
<div class="burkolo">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
</code>


Nyújtás:
<html>
<style>
.burkolo012 {
   display: flex;
   align-items: stretch;
   border: 1px solid navy;
   width: 200px;
   height: 300px;
}
.burkolo012 div {
    background-color: orange;
    padding: 10px;
}
</style>

<div class="burkolo012">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
</html>

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

<html>
<style>
.burkolo013 {
   display: flex;
   align-items: center;
   border: 1px solid navy;
   width: 200px;
   height: 300px;
}
.burkolo013 div {
    background-color: orange;
    padding: 10px;
}
</style>

<div class="burkolo013">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
</html>








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

<html>
<style>
.burkolo014 {
   display: flex;
   align-items: flex-start;
   border: 1px solid navy;
   width: 200px;
   height: 300px;
}
.burkolo014 div {
    background-color: orange;
    padding: 10px;
}
</style>

<div class="burkolo014">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
</html>



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

<html>
<style>
.burkolo015 {
   display: flex;
   align-items: flex-end;
   border: 1px solid navy;
   width: 200px;
   height: 300px;
}
.burkolo015 div {
    background-color: orange;
    padding: 10px;
}
</style>

<div class="burkolo015">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
</html>


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

<html>
<style>
.burkolo016 {
   display: flex;
   align-items: baseline;
   border: 1px solid navy;
   width: 200px;
   height: 300px;
}
.burkolo016 div {
    background-color: orange;
    padding: 10px;
}
</style>

<div class="burkolo016">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
</html>


Egyéb:
  * https://developer.mozilla.org/en-US/docs/Web/CSS/align-items


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


<code css>
.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;
}
</code>

<code html>
<div class="burkolo">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
</code>


Nyújtás:
<html>
<style>
.burkolo017 {
   display: flex;
   flex-wrap: wrap;
   align-content: stretch;
   border: 1px solid navy;
   width: 72px;
   height: 300px;
}
.burkolo017 div {
    background-color: orange;
    padding: 10px;
    height: 30px;
}
</style>
<div class="burkolo017">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
</html>


Középre:
<html>
<style>
.burkolo018 {
   display: flex;
   flex-wrap: wrap;
   align-content: center;
   border: 1px solid navy;
   width: 72px;
   height: 300px;
}
.burkolo018 div {
    background-color: orange;
    padding: 10px;
    height: 30px;
}
</style>
<div class="burkolo018">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
</html>


Elejére:
<html>
<style>
.burkolo019 {
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
   border: 1px solid navy;
   width: 72px;
   height: 300px;
}
.burkolo019 div {
    background-color: orange;
    padding: 10px;
    height: 30px;
}
</style>
<div class="burkolo019">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
</html>



Végére:
<html>
<style>
.burkolo020 {
   display: flex;
   flex-wrap: wrap;
   align-content: flex-end;
   border: 1px solid navy;
   width: 72px;
   height: 300px;
}
.burkolo020 div {
    background-color: orange;
    padding: 10px;
    height: 30px;
}
</style>
<div class="burkolo020">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
</html>



Egyenletes elosztás:
<html>
<style>
.burkolo021 {
   display: flex;
   flex-wrap: wrap;
   align-content: space-between ;
   border: 1px solid navy;
   width: 72px;
   height: 300px;
}
.burkolo021 div {
    background-color: orange;
    padding: 10px;
    height: 30px;
}
</style>
<div class="burkolo021">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
</html>

Egyenletes elosztás, mindkét végén egy rész hellyel kiegészítve:
<html>
<style>
.burkolo022 {
   display: flex;
   flex-wrap: wrap;
   align-content: space-around;
   border: 1px solid navy;
   width: 72px;
   height: 300px;
}
.burkolo022 div {
    background-color: orange;
    padding: 10px;
    height: 30px;
}
</style>
<div class="burkolo022">
    <div>Lorem1</div>
    <div>Lorem2</div>
    <div>Lorem3</div>
</div>
</html>



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


<code css>
.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;
}
</code>

<code html>
<div class="burkolo">
    <div class="e1">Lorem1</div>
    <div class="e2">Lorem2</div>
    <div class="e3">Lorem3</div>
</div>
</code>


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

<div class="burkolo023">
    <div class="e1">Lorem1</div>
    <div class="e2">Lorem2</div>
    <div class="e3">Lorem3</div>
</div>
</html>

===== Link =====

  * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container (2024)