MagyarmagyarRács konténer elrendezési és stílusbeállításai
A rács konténer Elrendezés fülének mezői (típus, szélesség, oszlopok, sorok, hézagok, automatikus elrendezés, igazítások) és a Stílus fül szakaszai.
A rács konténerrel gyorsan igazíthatod az elemeket, mégis elég beállítás van ahhoz, hogy az elrendezés változatos maradjon. A létrehozását a Rács konténer készítése fejezet írja le.
A képen a rács konténer Elrendezés füle látható.
Elrendezés fül: konténer
Szekció neve “Elrendezés fül: konténer”| Beállítás | Mit csinál |
|---|---|
| Konténerelrendezés | Rács: azonos számú, szimmetrikus sorból és oszlopból álló konténer. Flexbox: a sorok és oszlopok mintáját te választod meg. |
| Konténer szélessége | Dobozos: a szélességet a Szélesség csúszkával adod meg, és a konténer középre igazított marad. Teljes szélesség: a konténer a teljes képernyőszélességet kitölti, a csúszka ilyenkor nem használható. |
| Minimális magasság | A konténer legkisebb magassága csúszkával. A mértékegységekről a Mértékegységek fejezet szól. |
Elrendezés fül: tételek
Szekció neve “Elrendezés fül: tételek”| Beállítás | Mit csinál |
|---|---|
| Rács körvonala | Alapértéke Mutat: a szerkesztőben látszanak a cellák határai. A Rejt értékkel láthatatlanná válnak. |
| Oszlopok | Az oszlopok számát csúszkával állíthatod. Az oszlopszélesség alapból törtrészben (FR) van megadva, de a mértékegység-váltóval átállítható. |
| Sorok | A sorok számát csúszkával állíthatod. A sormagasság alapból szintén FR-ben van megadva, de átállítható. |
| Mértékegység-váltó | Átváltja a sorok (és oszlopok) méretezését FR és egyéni mérték között. Az egyéni mértékben szokásos egységet (PX, EM, REM) vagy CSS-értéket is megadhatsz. Különböző méretű sorokhoz is ezt használod: három sorhoz például a 200PX 1FR 400PX érték három különböző magasságú sort ad. |
| Hézagok | Üres térköz a cellák között. |
| Automatikus elrendezés | Sor: a widgetek balról jobbra töltik a cellákat, a sor végén a következő sorba lépnek. Oszlop: a widgetek lefelé haladnak, az oszlop végén a következő oszlop tetejére kerülnek. |
| Elemek igazítása (vízszintes) és Elemek igazítása (függőleges) | A cellák tartalmát igazítják. |
| Tartalom igazítása (vízszintes) | A cellák helyzetét igazítja a rácson belül. Csak akkor jelenik meg, ha egyéni oszlopméretet használsz, és az oszlopok összszélessége kisebb a konténer szélességénél (különben nincs hely az elmozdulásra). |
| Tartalom igazítása (függőleges) | Ugyanez a sorokra: csak egyéni sormérettel jelenik meg, ha a sorok összmagassága kisebb a konténer magasságánál. |
Az igazítások részleteit az Elrendezés fül fejezet magyarázza.
Stílus fül
Szekció neve “Stílus fül”A rács konténer Stílus füle ugyanazokat a szakaszokat tartalmazza, mint a Flexbox konténeré. A konténer Stílus füle fejezet részletesen leírja őket, itt az összefoglaló.
Háttér
Szekció neve “Háttér”- Normál és Hover állapot: milyen legyen a háttér alapból, illetve egérrel fölé mutatáskor.
- Szín és Kép: egyszínű vagy képes háttér.
- Görgetési hatások: a kapcsolóval a képernyő megváltozik, amikor a látogató fel vagy le görget (függőleges és vízszintes görgetés, átlátszóság, elmosás, méretezés). Megadhatod, mely eszközméreteken (asztali, tablet, mobil) érvényesüljön.
- Egérhatások: a konténer elemei követik az egér mozgását.
Háttér átfedés
Szekció neve “Háttér átfedés”Részben átlátszó réteg a háttéren, amely mélységet ad. Normál és hover állapota is van.
- Háttér típusa: egyszínű vagy kép (Klasszikus), illetve két szín keveréke (Színátmenet).
- Átlátszatlanság: mennyire legyen átlátszó az átfedés.
- CSS-szűrők: további speciális hatások.
- Keverési mód: az átfedés és a háttér keveredése.
Szegély
Szekció neve “Szegély”Normál és hover állapotban: a szegély típusa, a Szegély lekerekítése és a Doboz árnyéka.
Alakzat elválasztó
Szekció neve “Alakzat elválasztó”Egyedi formájú szegélyt (például hullámot vagy háromszöget) adhatsz a konténer tetejéhez és aljához.
Készült: