MagyarmagyarA konténer Elrendezés fülének beállításai
Szélesség, magasság, irány, igazítás, hézag, tördelés, túlcsordulás és HTML-címke a Flexbox konténeren.
A konténer Elrendezés füle azt szabályozza, hogyan rendeződnek el a konténerben lévő elemek. Jelöld ki a konténert a vásznon, és nyisd meg a Tároló szerkesztése panelt: három füle van, Elrendezés, Stílus és Haladó.
A fenti kép a Tároló szekciót és a Tételek csoportot mutatja.
Tároló szekció
Szekció neve “Tároló szekció”Konténerelrendezés
Szekció neve “Konténerelrendezés”Itt választasz a Flexbox és a Rács között. A Rács beállításairól a Rács konténer készítése fejezet szól.
Tartalom szélessége
Szekció neve “Tartalom szélessége”Azt dönti el, hogy a konténer tartalma Dobozos (korlátozott szélességű) vagy Teljes szélesség legyen. Melyiket válaszd?
| Ha ezt szeretnéd | Ezt használd |
|---|---|
| A konténer szélessége maradjon, de a benne lévő tartalom szélessége változzon | Dobozos, a tartalom szélességét a Szélesség mezővel állítod |
| A konténer szélessége változzon, a tartalom szélessége ne | Teljes szélesség, a konténer szélességét a Szélesség mezővel állítod |
| Mindkettő változzon | Teljes szélesség, a konténer szélességét a Szélesség mezővel, a tartalom szélességét a Haladó fül belső térközével (padding) állítod |
A Tartalom szélessége minden eszköznézetre külön beállítható.
Szélesség
Szekció neve “Szélesség”A konténer vagy a tartalom szélességét adod meg PX, % vagy VW egységben. A hatása a Tartalom szélessége értékétől függ:
- Dobozos: a konténeren belüli tartalom szélességét állítja. Új konténernél ez az alapérték.
- Teljes szélesség: magát a konténert szélesíti vagy keskenyíti.
Alapból mindkét típus kitölti a rendelkezésre álló helyet. Ha a konténer a legfelső szinten van, a teljes nézetablak szélességét foglalja el, ha pedig egy másik konténerbe van ágyazva, a szülő tartalmának teljes szélességét.
Minimális magasság
Szekció neve “Minimális magasság”A konténer tartalmának legkisebb magassága, csúszkával vagy beírt értékkel, PX vagy VH egységben. A 100 VH a nézetablak teljes magasságát jelenti. Ez is eszközönként állítható.
Tételek
Szekció neve “Tételek”Ezek a beállítások a konténeren belüli összes elemre vonatkoznak.
Irány
Szekció neve “Irány”Az elrendezés legalapvetőbb beállítása. Négy lehetőséged van:
| Gomb | Hatás |
|---|---|
| Vízszintes sor | Az elemek egymás mellett állnak |
| Függőleges oszlop | Az elemek egymás alatt állnak |
| Fordított sor | Egymás mellett, fordított sorrendben |
| Fordított oszlop | Egymás alatt, fordított sorrendben |
Tartalom igazítása
Szekció neve “Tartalom igazítása”Az irány fő tengelye mentén igazítja az elemeket, és elosztja a konténerben maradó helyet. A lehetőségek: Indítás, Középre, Vége, Térköz az elemek között, Egyenletes térköz az elemek körül és Egyenletes térköz.
- Indítás: a tartalom a konténer kezdő széléhez igazodik.
- Középre: a tartalom a konténer közepére kerül.
- Vége: a tartalom a záró élhez igazodik.
- Térköz az elemek között: az első elem a kezdő, az utolsó a záró élhez kerül, a köztük lévő hely egyenlően oszlik el.
- Egyenletes térköz az elemek körül: minden elem körül egyenlő a hely, így a szélső elemek és a konténer széle között fele akkora a térköz, mint az elemek között.
- Egyenletes térköz: az elemek között, valamint az első előtt és az utolsó után is ugyanakkora a hely.
Elemek igazítása
Szekció neve “Elemek igazítása”A mellék tengely mentén igazítja az elemeket. A lehetőségek: Indítás, Középre, Vége és Nyújtott. A Nyújtott csak azoknál az elemeknél hat, amelyeknek nincs megadott szélessége.
Igazítások kombinálása
Szekció neve “Igazítások kombinálása”Általában a két igazítást együtt használod. Például vízszintes soros iránynál az Elemek igazítása legyen Középre, majd a Tartalom igazítása értékével oszd el az elemeket a kívánt módon.
Hézagok
Szekció neve “Hézagok”Az elemek közötti térköz, külön Oszlop és Sor értékkel (PX, % vagy VW). Összekapcsolhatod őket a lánc ikonnal. A hézag a margóhoz hasonlóan az elem „kívüli” helyét használja. Tördeléssel együtt a gyermek elemek szélességéből le kell vonni a hézagot: ha például két elemet 5%-os hézaggal szeretnél egy sorba tenni, 47,5% + 5% + 47,5% kell, mert az 50% + 50% mellé már nem fér hézag. Ha ez nem működik, használj helyette margót vagy belső térközt.
Az alapértelmezett elemhézag 20 PX; a webhely beállításai között, az elrendezés részben módosítható. Ez is eszközönként állítható.
Tördelés
Szekció neve “Tördelés”Ha a Tördelés be van kapcsolva, a megadott szélességű elemek több sorba törhetnek ahelyett, hogy egyetlen sorba szorulnának. Így egyetlen konténerben is lehet többsoros elrendezés. Például egy nagy címsor állhat több kisebb, egymás mellé tett elem fölött; ezt korábban beágyazott szakasszal oldottad meg, most egyetlen konténerrel is megy.
A Nincs tördelés az alapérték.
Tartalom igazítása (tördelésnél)
Szekció neve “Tartalom igazítása (tördelésnél)”Ez a második Tartalom igazítása mező csak bekapcsolt tördelésnél jelenik meg. A sorok közötti szabad helyet osztja el ugyanúgy, mint a fenti Tartalom igazítása, a lehetőségei: középre, kezdő, záró, térköz az elemek között, egyenletes térköz az elemek körül és egyenletes térköz.
A képen a Tördelés be van kapcsolva, ezért alatta megjelent a második Tartalom igazítása sor.
További lehetőségek
Szekció neve “További lehetőségek”
Túlcsordulás
Szekció neve “Túlcsordulás”Azt szabályozza, mi történjen, ha a tartalom nem fér el a konténerben:
- Alapértelmezett: a tartalom kilóghat a konténerből.
- Rejtett: a túllógó rész rejtve marad, és nem érhető el.
- Automatikus: görgetősáv jelenik meg, így a tartalom elérhető marad. Mobil nézetben a tartalmon át lehet húzni az ujjaddal.
HTML-címke
Szekció neve “HTML-címke”A listából kiválaszthatod a konténerhez leginkább illő HTML-címkét (például div, header, main, section). Az a (hivatkozás) címkével a konténer kattinthatóvá tehető. A címke a keresőmotorok számára is jelzi a tartalom szerepét, ezért a keresőoptimalizálás szempontjából fontos, főleg a magasabb szintű konténereknél. Ez is eszközönként állítható.
Készült: