| Autor | Zpráva | ||
|---|---|---|---|
| danhill Profil |
#1 · Zasláno: 2. 11. 2020, 18:12:21
Ahoj,
prosím, o pomoc s flexboxem. Nelze zde přiložit obrázek, tak se to zkusím popsat. Mám nějaké symboly, jsou 4 (čtverec,kolečko,křížek a trojúhelník). říkejme jim 1,2,3,4 Z těchto čtyř symbolů potřebuji poskládat čtvercovou ikonu a pomocí změny parametru měnit její velikost. Pozice a barva jednotlivých symbolů bude proměnlivá. Výsledek by měl být něco jako : |1|2| |3|4| ale obsah se bude měnit, tedy např.: |3|4| |2|1| atd. Netrvám na použití flexboxu, ale nechci to vytvářet pomoci stylování html tabulky. Jde o to, že jsem nějak nepochopil, jak item v containeru zalomím napevno po druhém elementu nezávisle na tom, kolik má container kolem sebe místa. Ve výsledku není potřeba žádné ohraničení ani jiné stylovaní, prostě jen ty čtyři symboly, vlastně to mohou být klidně i čtyři html symboly, aby se mi vždy zarovnaly dva a dva do čtverce. |
||
| danhill Profil |
#2 · Zasláno: 3. 11. 2020, 18:58:14
Tak jsem si asi poradil.
Nevím zda je to správně, ale dělá to to co potřebuji. <style>
.conteiner {
display: flex;
justify-content: flex-start;
height: 100px;
width: 100px;
flex-wrap: wrap;
flex-direction: column;
}
.item {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
height: 50%;
font-size: 2em;
}
</style>
<div class="conteiner">
<div class="item">1</div>
<div class="item">3</div>
<div class="item">2</div>
<div class="item">4</div>
<div> |
||
|
Časová prodleva: 3 roky
|
|||
0