CSS Flexboxok kezelése
Mint tudják, létezik a justify-content tulajdonság,
amely a főtengely mentén igazítja az elemeket.
Van továbbá a align-items tulajdonság is, amely
a keresztirányú tengely mentén igazítja az elemeket. Játsszunk
egy kicsit vele.
Tegyük fel, hogy a blokkok jelenleg sorban vannak elrendezve,
vagyis a keresztirányú tengely lefelé mutat. A
align-items segítségével helyezzük ezeket a blokkokat
középre:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-items: center;
width: 300px;
height: 300px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Most adjunk hozzá több blokkot, engedélyezzük a
többsoros elrendezést a flex-wrap segítségével,
növeljük a szülő magasságát 300px-ról
500px-ra, és nézzük meg, hogyan működik a align-items
ebben a többsoros esetben:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Amint látjuk, valami nem nagyon középre igazódik. Mintha minden sor önállóan középre igazódna a neki lefoglalt helyen. Csináljuk úgy, hogy az összes sor egységes egészként kerüljön a szülő közepére.
Ehhez a align-content tulajdonságot kell használni,
amely a többsoros elrendezéshez szükséges.
Írjuk át a kódunkat:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
A align-content tulajdonság ugyanazokat az
értékeket fogadja el, mint a align-items.
A space-between érték
Nézzük példaként a
space-between értéket. Állítsuk a szülő
magasságát 320px-ra. Mivel három
sorunk van, és ennek megfelelően két távolság a sorok
között, ezért ezek a távolságok mindegyike
10px lesz:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: space-between;
flex-wrap: wrap;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
A stretch érték
Próbáljuk ki a stretch értéket.
Ehhez távolítsuk el a magasságot az utódoktól, és a szülő
magasságát állítsuk 600px-ra, hogy
nyilvánvalóbb legyen a hatás.
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: stretch;
flex-wrap: wrap;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
A stretch érték az align-content alapértelmezett értéke.
Ha teljesen eltávolítjuk az utódok magasságát,
eltávolítjuk az align-content tulajdonságot,
de meghagyjuk a szülő magasságát és a flex-wrap-t
- minden ugyanúgy fog működni:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
De ha a flex-wrap-t is eltávolítjuk
- minden egy sorban lesz:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
Fordítsuk meg a tengelyt
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Különleges feltételek
Flex-wrap: wrap nélkül semmi sem működik, még akkor sem, ha csak egy sorunk van:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Távolítsuk el a flex-wrap: wrap-t - az align-content: center megszűnik működni:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
