VISSZA
MENÜ
TOVÁBBA flex-shrink tulajdonság segítségével módosíthatjuk, hogy a kijelzőméret csökkenésekor az egyes elemek a többihez viszonyítva milyen mértékben zsugorodjanak.
Ha egy gyermekelemet nagyobb mértékben szeretnénk zsugorítani a többinél, akkor nagyobb számértéket adunk meg mint a többinél. Ha kisebb mértékben, akkor kisebbet. (Nincs egyenes arányosság a számérték és a zsugorítás mértéke között.)
A böngésző a zsugorított méretek meghatározásakor figyelembe veszik a gyermekelemek tartalmát is.
A gyermekek zsugorításának szabályozása:
kijelölő
{
flex-shrink
:
szám;
}
(Alapértelmezett érték=1.)
1. Példa:
Forráskód
<head>
...
<style>
...
.Elem {
padding: 5px;
border:1px solid #066;
background-color:#fff;
text-align:center;
}
.divFlex {
display: flex;
justify-content: space-between;
}
img {
max-width:100%;
}
.flex-shrink1 {
flex-shrink: 1;
}
.flex-shrink2 {
flex-shrink: 2;
}
.flex-shrink5 {
flex-shrink: 5;
}
</style>
</head>
<body>
<h2>flex-shrink: 1/1/1</h2>
<div class="divFlex">
<div class="Elem flex-shrink1">
<img src="html5_css3_logo.jpg" alt="logo">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit ...</p>
</div>
<div class="Elem flex-shrink1">
<img src="html5_css3_logo.jpg" alt="logo">
<p>Lorem ipsum dolor sit amet ...</p>
</div>
<div class="Elem flex-shrink1">
<img src="html5_css3_logo.jpg" alt="logo">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing ...</p>
</div>
</div>
<h2>flex-shrink: 2/1/2</h2>
<div class="divFlex">
<div class="Elem flex-shrink2">
<img src="html5_css3_logo.jpg" alt="logo">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit ...</p>
</div>
<div class="Elem flex-shrink1">
<img src="html5_css3_logo.jpg" alt="logo">
<p>Lorem ipsum dolor sit amet ...</p>
</div>
<div class="Elem flex-shrink2">
<img src="html5_css3_logo.jpg" alt="logo">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing ...</p>
</div>
</div>
<h2>flex-shrink: 5/1/2</h2>
<div class="divFlex">
<div class="Elem flex-shrink5">
<img src="html5_css3_logo.jpg" alt="logo">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit ...</p>
</div>
<div class="Elem flex-shrink1">
<img src="html5_css3_logo.jpg" alt="logo">
<p>Lorem ipsum dolor sit amet ...</p>
</div>
<div class="Elem flex-shrink2">
<img src="html5_css3_logo.jpg" alt="logo">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing ...</p>
</div>
</div>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: flexi8.html