Ebben a bemutatóban a flex-shrink CSS tulajdonság módosítót fogjuk megvizsgálni. Ez az opció a flexbox modell része, amely lehetővé teszi a különböző képernyőméretekhez alkalmazkodó, rugalmas elrendezések létrehozását. Míg az előző videóban a flex-grow-t tárgyaltuk, amely azt szabályozza, hogy a flex konténerben lévő elemek hogyan nőjenek, ezúttal az elemek zsugorodásáról beszélünk, amikor a konténerben lévő hely kisebb, mint a megadott flex-base. Ebben a cikkben megtanulja, hogyan használhatja a flex-shrinket a flexbox elemek zsugorodásának korlátozására vagy beállítására.
A legfontosabb megállapítások
- A flex-shrink határozza meg, hogy egy elem mennyire zsugorodhat, ha nincs elég hely.
- A flex-shrink alapértelmezett értéke 1, ami azt jelenti, hogy egy elem attól függően foglalhat helyet, hogy mennyi hely áll rendelkezésre, és hogy hány más elem van meghatározva a konténerben.
- A flex-shrink értékkel meghatározhat egy adott arányt a több elem közötti zsugorodásra.
Lépésről-lépésre történő utasítások
A következőkben ismertetem a flex-shrink maximális kihasználásának lépéseit. Minden egyes lépést képernyőkép-változókkal látok el, amelyeket később a videóból származó megfelelő képernyőképekkel helyettesíthet.
Először egy alapvető flexbox alkalmazást fogsz látni CSS-ben. Van három elemed, amelyeknek a flex-bázisa 100 pixel. Ha van elég hely a flexkonténerben, minden marad a tervek szerint.
Most csökkentjük a konténer magasságát 200 pixelre. Ebben az esetben a szükséges hely nagyobb, mint a konténer magassága. Az elemek flex-bázisa továbbra is 100 pixel, ezért nem tudnak zsugorodni, mivel a flex-shrink értékét 0-ra állítottuk.
A zsugorodási mechanizmus aktiválásához módosítsa a flex-shrink értékét. Állítsa 1-re a nav elem esetében, hogy a CSS-t tájékoztassa arról, hogy a nav elemnek a lehető legnagyobb mértékben kell zsugorodnia.
Most mentse el a módosításokat, és látni fogja, hogy a nav elem arányosan, a tartalom által megadott minimális magasságig zsugorodik.
Ha azt szeretné, hogy minden elem egyformán zsugorodjon, állítsa a flex-shrink értékét minden elem esetében 1-re. Ha a konténer most kisebb lesz, mint a szükséges hely, minden elem ennek megfelelően fog zsugorodni.
Annak összefoglalásához, hogy a különböző flex-shrink értékek hogyan hatnak az elrendezésre, válasszon egy olyan arányt, mint például 1:1:2. Ebben az esetben a fő terület (main) kapja a legnagyobb arányú zsugorodást, míg a többi elem egyenként kisebb arányban.
Ez azt jelenti, hogy helyhiány esetén a fő elem több helyet foglal el, vagy kevesebb helyet igényel, mint a másik két elem. Ha azonban zúzott elrendezésű testreszabást szeretne, akkor a flex-shrink értékét minden elem esetében azonos értékre is beállíthatja.
Végül a flex-grow, flex-shrink és flex-base értékeit kombinálhatja, ami nagyobb rugalmasságot biztosít az elrendezés CSS-ben történő megtervezésekor. Győződjön meg róla, hogy ezeket mindig a tervezési követelményeihez igazítja.
Összefoglaló
Ebben a bemutatóban megtanulta, hogyan használhatja a flex-shrinket a CSS-ben a flexbox elemek átméretezésének szabályozására. Megismerkedett a zsugorítás meghatározásának különböző módjaival, és azzal, hogy ezek hogyan befolyásolják az elrendezést.
Gyakran ismételt kérdések
Hogyan működik a flex-shrink? Aflex-shrink meghatározza, hogy egy elem mennyit zsugorodhat, ha a rendelkezésre álló hely kisebb, mint a flex-base.
Mi a flex-shrink alapértelmezett értéke?A flex-shrink alapértelmezett értéke 1, ami azt jelenti, hogy minden elem egyformán zsugorodik.
Hogyan állíthatom be a flex-shrink értéket több elemhez?Ha minden elemhez ugyanazt a flex-shrink értéket adom meg, a zsugorodás egyenletesen oszlik el.
Használhatom a flex-shrink-et a flex-grow-val együtt?Igen, a flex-shrink, a flex-grow és a flex-base együtt használható a rugalmas elrendezés eléréséhez.
Mi történik, ha a flex-shrink 0-ra van állítva?Ha a flex-shrink 0-ra van állítva, az adott elemek nem zsugorodnak, még akkor sem, ha a tároló kisebb, mint a flex-basis összege.
