A Flex használata webhelye rugalmasabbá tételéhez

A modern webhelyek kialakításának érzékenynek kell lennie a tartalom vagy a böngésző méretének változásaira. Ezt a vanília CSS, a médialekérdezések vagy a flexbox segítségével érheti el.

Bizonyos rugalmas tulajdonságok, például a flex-wrap vagy a flex-grow vizuálisan tetszetős módon megváltoztathatják egy elem méretét vagy helyét. Ez a cikk a flex-grow, flex-shrink, flex-wrap, flex-flow és order flex tulajdonságok használatára vonatkozó példákon mutatja be.

A CSS Flex Display beállítása

Ha nem ismered a flexbox alapjai, ezt felfedezheti CodePen részlet. Példakódot tartalmaz egy egyszerű flexbox beállításhoz. Először is be kell csomagolnia az alárendelt elemeket egy szülő div vagy "flex tároló" alá.

<div class="szülő">
<div class="gyermek-tétel"></div>
<div class="gyermek-tétel"></div>
<div class="gyermek-tétel"></div>
</div>

Adja hozzá a kijelző: flex tulajdon a szülő div.

.szülő {
 kijelző: flex;
}

Hogyan termeszthetünk tárgyakat egy tartályban

A flex-grow tulajdonság lehetővé teszi, hogy az alárendelt elemek kibővüljenek, hogy kitöltsék a szülő divben rendelkezésre álló helyet. Ezzel a tulajdonsággal megadhatja, hogy az egyes dobozelemek mekkora területet foglalhatnak el.

A flex-grow hozzáadásához adja hozzá a flex-grow CSS tulajdonságot az egyes alárendelt elemekhez.

<div class="szülő">
<div style="háttérszín: piros; rugalmas növekedés: 1"></div>
<div style="háttérszín: narancssárga; rugalmas növekedés: 1"></div>
<div style="háttérszín: sárga; rugalmas növekedés: 1"></div>
<div style="háttérszín: zöld; rugalmas növekedés: 3"></div>
<div style="háttérszín: kék; rugalmas növekedés: 1"></div>
</div>

.szülő {
 szélesség: 500 képpont;
 kijelző: flex; 
}

Az egyes tételek 0-s flexiós növekedése azt jelenti, hogy a dobozok nem tágulnak ki, hogy betöltsék a szülő helyét. A 0 a tulajdonság alapértelmezett értéke.

Az egyes tételek 1-es flexiós növekedése arra kényszeríti az összes dobozt, hogy egyenlő mértékben táguljon, hogy elférjen a szülőben rendelkezésre álló hely.

Ha az egyik elemnél nagyobb volt a hajlítás, például:

<div style="háttérszín: zöld; rugalmas növekedés: 3"></div>

A zöld doboz háromszor annyi helyet próbál meg nyerni, mint a többi doboz.

Tekintse meg a flex-grow tulajdonság kódját ebben CodePen részlet működő példát látni.

Hogyan zsugorítsuk össze az elemeket egy tartályban

Egyes esetekben a szülő szélessége csökkenhet, és a szülőben lévő elemek már nem férnek el. Használhatja a rugalmas-zsugorodás tulajdonság a dobozok méretének csökkentésére. Így a szülő belsejében maradhatnak.

A flexibilis zsugorodás lehetővé teszi, hogy meghatározza az egyes tételek arányát.

Adja hozzá a flex-shrink tulajdonságot a gyermek div elemekhez. Módosítsa a szülő és a gyermekek szélességét, hogy az elemek ne férjenek be a tárolóba.

<div class="szülő">
<div style="háttérszín: piros; rugalmas zsugorodás: 1"></div>
<div style="háttérszín: narancssárga; rugalmas zsugorodás: 1"></div>
<div style="háttérszín: sárga; rugalmas zsugorodás: 1"></div>
<div style="háttérszín: zöld; hajlékony zsugor: 2"></div>
<div style="háttérszín: kék; rugalmas zsugorodás: 1"></div>
</div>

.szülő {
 szélesség: 500 képpont;
 kijelző: flex; 
}
.szülő div {
 szélesség: 150 képpont;
 magasság: 150 képpont;
}

Az összes elemnél 1-es rugalmas zsugorodás azt jelenti, hogy minden elem egyformán zsugorodik, ha a szülő szélességét csökkentjük.

Ha az egyik elemnek nagyobb volt a rugalmas zsugorodása, például:

<div style="háttérszín: zöld; hajlékony zsugor: 2"></div>

A zöld doboz kétszer annyit próbál zsugorodni, mint a többi doboz.

Tekintse meg a flex-shrink tulajdonság kódját ebben CodePen részlet működő példát látni.

Elemek áthelyezése a következő sorba

A flex-wrap A tulajdonság lehetővé teszi, hogy az elemeket a következő sorba tolja, ha nem férnek el a szülőtároló szélességében. Itt az elemek nem zsugorodnak, és megőrizheti a tárgyak magasságát és szélességét.

A flex-wrap tulajdonság opciói a következők:

flex-wrap: nowrap | pakolás | wrap-reverse

Adja hozzá a flex-wrap tulajdonságot a szülő flex-tárolóhoz. Ügyeljen arra, hogy a tartály szélessége elég kicsi legyen, hogy ne férhessen el benne a gyermek tárgyak. Ez minden túlcsorduló elemet új sorba kényszerít.

<div class="szülő">
<div class="piros"></div>
<div class="narancssárga"></div>
<div class="sárga"></div>
<div class="zöld"></div>
<div class="kék"></div>
</div>

.szülő {
 szélesség: 300 képpont;
 keret: 1px tömör fekete;
 kijelző: flex;
 flex-wrap: pakolás;
}
.szülő div {
 szélesség: 100 képpont;
 magasság: 100 képpont;
}

A tördelési érték a tároló jobb felső sarkától kezdődően helyezi el az elemeket. A wrap-reverse érték áthelyezi az elemeket a tároló jobb alsó sarkában kezdődően. A tételek becsomagolásakor az elemeket egy új sorba tolja fel, nem pedig lent.

Ha megad egy magasságot a szülőtárolóban, akkor a tároló szóközt ad az elemek sorai között.

Ha el szeretné távolítani ezt a szóközt, de megtartja a szülő div magasságát, használja az align-content tulajdonságot. Adja meg az align-content tulajdonságot "flex-start"-ként a szülő divben:

.szülő { 
 szélesség: 300 képpont; 
 magasság: 300 képpont;
 keret: 1px tömör fekete; 
 kijelző: flex;
 flex-wrap: pakolás; 
 igazítás-tartalom: flex-Rajt;
}

Az align-content tulajdonság a számos mag egyike flexbox tulajdonságok, amelyek lehetővé teszik az igazítás szabályozását.

Tekintse meg a flex-wrap tulajdonság kódját ebben CodePen részlet néhány példát látni.

Elemek áthelyezése a következő oszlopba

Ha más elrendezést (például oszlopot) használ, és továbbra is szüksége van az elemekre a tördeléshez, használhatja a flex-flow ingatlan. Ez a flex tulajdonság a flex-wrap és a flex-direction tulajdonságok kombinációja.

Példa a flex-flow tulajdonsághoz használható opciókombinációkra:

flex-wrap: sor nowrap | oszlop nowrap | sor burkolása | oszlopburkoló | sor tördelése-fordítás | oszlop burkolása-fordítása

Ez a tulajdonság a fenti flex-wrap tulajdonsághoz hasonlóan működik. Adja hozzá a flex-flow-t a szülő flex tárolóhoz. Győződjön meg arról, hogy a szülőtároló szélessége elég kicsi ahhoz, hogy az alárendelt elemeket becsomagolják:

.szülő {
 szélesség: 300 képpont; 
 keret: 1px tömör fekete; 
 kijelző: flex; 
 flex-flow: oszloptekercselés;
}
.szülő div {
 szélesség: 100 képpont;
 magasság: 100 képpont;
}

Az elemek a megadott irányban tördelődnek (sor vagy oszlop).

Tekintse meg a flex-flow tulajdonság kódját ebben CodePen részlet néhány példát látni.

A tételek sorrendjének megváltoztatása

Ha bármilyen dinamikus adat miatt újra kellett rendeznie az oldalon lévő elemeket, használhatja a rendelés flex tulajdonság. Ez a tulajdonság lehetővé teszi az egyes tételek megjelenési sorrendjének megadását.

A számoknak nem feltétlenül 1-től kell kezdődniük. Bármilyen számot és intervallumot használhat, és az order tulajdonság a legalacsonyabbtól a legmagasabbig rendezi a HTML elemeket.

Adja hozzá a rendelés tulajdonságot a szülő rugalmas tárolóban lévő egyes cikkekhez:

<div class="szülő">
<div class="piros" stílus="sorrend: 2"></div>
<div class="narancssárga" stílus="sorrend: 1"></div>
<div class="sárga" stílus="sorrend: 5"></div>
<div class="zöld" stílus="sorrend: 4"></div>
<div class="kék" stílus="sorrend: 3"></div>
</div>

Ebben az esetben a narancssárga négyzet lesz a jobb szélen, majd a piros, kék, zöld, majd sárga négyzet.

Tekintse meg a rendelési tulajdonság kódját ebben CodePen részlet néhány példát látni.

Kísérletezzen további CSS-tulajdonságokkal a webhelyén

Használhatja ezeket a flex tulajdonságokat arra, hogy webhelyét jobban reagálóvá tegye. Ez magában foglalja a flex-grow, flex-shrink, flex-wrap, flex-flow és order flex tulajdonságok használatát.

További rugalmas tulajdonságokról is tájékozódhat, amelyek segítenek a webhely HTML-elemeinek összehangolásában.

A Flex használata a HTML-elemek igazításához

Olvassa el a következőt

A szerzőről