VISSZA
MENÜ
TOVÁBBA flex-wrap tulajdonság segítségével engedélyezhetjük a sortörést/oszloptörést. Túllógás helyett így az egysoros/egyoszlopos elrendezés helyett többsoros/többoszlopos elrendezés jön létre:
- nowrap: Nincs sortörés/oszloptörés. (alapértelmezett)
- wrap: Automatikus sortörés/oszloptörés engedélyezve.
- wrap-reverse: Automatikus sortörés/oszloptörés engedélyezve. Az elemek fordított sorrendben jelennek meg.
A sortörés beállítása:
kijelölő
{
flex-wrap
:
kulcsszó;
}
1. Példa:
Forráskód
<head>
...
<style>
...
.Elem {
padding: 5px;
border:1px solid #066;
width:60px; height:18px;
background-color:#fff;
text-align:center;
}
.divFlex {
display: flex;
}
.nowrap {
flex-wrap: nowrap;
}
.wrap {
flex-wrap: wrap ;
}
.wrap-reverse {
flex-wrap: wrap-reverse;
}
</style>
</head>
<body>
<h2>flex-wrap: nowrap</h2>
<div class="divFlex nowrap">
<div class="Elem">1. elem</div>
<div class="Elem">2. elem</div>
<div class="Elem">3. elem</div>
<div class="Elem">4. elem</div>
<div class="Elem">5. elem</div>
<div class="Elem">6. elem</div>
<div class="Elem">7. elem</div>
</div>
<h2>flex-wrap: wrap</h2>
<div class="divFlex wrap">
<div class="Elem">1. elem</div>
<div class="Elem">2. elem</div>
<div class="Elem">3. elem</div>
<div class="Elem">4. elem</div>
<div class="Elem">5. elem</div>
<div class="Elem">6. elem</div>
<div class="Elem">7. elem</div>
</div>
<h2>flex-wrap: wrap-reverse</h2>
<div class="divFlex wrap-reverse">
<div class="Elem">1. elem</div>
<div class="Elem">2. elem</div>
<div class="Elem">3. elem</div>
<div class="Elem">4. elem</div>
<div class="Elem">5. elem</div>
<div class="Elem">6. elem</div>
<div class="Elem">7. elem</div>
</div>
</body>
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ő: flexi5.html