VISSZA
MENÜ
TOVÁBBA flex-grow tulajdonság segítségével módosíthatjuk, hogy a kijelzőméret növekedésekor az egyes elemek a többihez viszonyítva milyen mértékben nyúljanak meg.
Ha egy gyermekelemet nagyobb mértékben szeretnénk nyújtani 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 nyújtás mértéke között.)
A böngésző a nyújtás méretek meghatározásakor figyelembe veszik a gyermekelemek tartalmát is.
A gyermekek nyújtásának szabályozása:
kijelölő
{
flex-grow
:
szám;
}
(Alapértelmezett érték=0.)
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;
}
.flex-grow1 {
flex-grow: 1;
}
.flex-grow2 {
flex-grow: 2;
}
.flex-grow5 {
flex-grow: 5;
}
</style>
</head>
<body>
<h2>flex-grow: </h2>
<div class="divFlex">
<div class="Elem flex-grow1">
<p>1</p>
</div>
<div class="Elem flex-grow1">
<p>1</p>
</div>
<div class="Elem flex-grow1">
<p>1</p>
</div>
</div>
<h2>flex-grow:</h2>
<div class="divFlex">
<div class="Elem flex-grow1">
<p>1</p>
</div>
<div class="Elem flex-grow2">
<p>2</p>
</div>
<div class="Elem flex-grow1">
<p>1</p>
</div>
</div>
<h2>flex-grow:</h2>
<div class="divFlex">
<div class="Elem flex-grow5">
<p>5</p>
</div>
<div class="Elem flex-grow2">
<p>2</p>
</div>
<div class="Elem flex-grow1">
<p>1</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ő: flexi9.html