A Grid/Flex Vizualizáló felismeri az összes CSS Grid és Flexbox konténert egy weboldalon, és vizuális fedőrétegként jeleníti meg az elrendezési szerkezetüket közvetlenül az oldalon. Láthatóvá válnak a grid vonalak, a sávméretek, a gap értékek, a flex irányok, az igazítási tengelyek és a gyerekelemek méretezése — mindezt a DevTools megnyitása nélkül.
A CSS Grid és a Flexbox a modern webes elrendezések alapkövei, de alapból láthatatlanok. Egy oldalt nézve nem látszanak a grid vonalak, a flex tengelyek vagy a gap értékek. A böngésző DevTools kínál ugyan némi grid overlay funkciót, de ehhez előbb meg kell találni a konténert az Elements panelen, manuálisan engedélyezni kell az overlayt, és egyszerre csak egy konténert mutat. A Grid/Flex Vizualizáló ezt teljesen automatizálja — átvizsgálja az oldalt, megtalálja az összes Grid és Flex konténert, és vizuális fedőrétegként jeleníti meg az elrendezési szerkezetüket. A Grid konténerek megmutatják az oszlop- és sorvonalakat a sávméretekkel együtt. A Flex konténerek mutatják a főtengely irányát, a kereszttengely igazítást és a hely elosztását. A gap területek színes sávokkal vannak kiemelve, amelyek megmutatják a pixel értékeket. Kattints bármely konténerre, és egy részletes tulajdonságpanelen láthatod az összes elrendezési tulajdonságot.
A Grid konténerek minden sor- és oszlopfolyamnál színes vonalakat mutatnak. A sávméretek (1fr, auto, 200px) minden vonalon fel vannak tüntetve. A gap területek félátlátszó sávokkal vannak kiemelve, amelyek megmutatják a gap értéket pixelben. Az implicit és explicit sávokat folytonos és szaggatott vonalak különböztetik meg.
A Flex konténerek nyíllal mutatják a főtengelyt (row, row-reverse, column, column-reverse) és az arra merőleges kereszttengelyt. A justify-content és align-items értékek felcímkézett igazítási jelzőkkel vannak vizualizálva, amelyek megmutatják, hogyan oszlik el a hely a gyerekelemek között.
Az eszköz automatikusan átvizsgálja az egész oldalt, és megtalálja az összes elemet display: grid vagy display: flex értékkel (beleértve az inline változatokat is). Egy jelvény mutatja az összesen észlelt konténerek számát. Nem kell manuálisan kijelölni elemeket — mindegyiket automatikusan megtalálja és listázza.
Kattints bármely konténerre, és megtekintheted az összes elrendezési tulajdonságát: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap, valamint az összes gyerekelem méretezési tulajdonsága (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Minden egyes Grid vagy Flex konténeren belüli gyerekelem mutatja a ténylegesen renderelt méretét, a flex-grow/shrink értékeit és a grid területen belüli elhelyezését. Pontosan látod, mekkora helyet foglal el minden gyerekelem és miért.
Felismeri a más Grid/Flex konténerekbe ágyazott Grid és Flex konténereket. Az overlay minden egymásba ágyazási szintet más színnel jelenít meg, így láthatod a teljes elrendezési hierarchiát.
Egy grid oszlop szélesebb vagy keskenyebb a vártnál? Az overlay megmutatja a tényleges sávméreteket (az 1fr 342px-re, az auto 156px-re oldódott fel), így pontosan látod, hogyan számította ki a böngésző a méreteket.
Miért szélesebb az egyik flex gyerekelem a másiknál? A vizualizáló megmutatja a flex-grow, flex-shrink és flex-basis értékeket minden gyerekeleméhez, ezzel láthatóvá teszi a hely elosztási logikát.
Méretezd át a böngészőt, és figyeld, ahogy a grid overlay valós időben frissül. Nézd, hogyan változik a grid-template-columns értéke asztali gépen "1fr 1fr 1fr"-ről mobilon "1fr"-re, és ellenőrizd az átmenetet minden töréspontnál.
Látogasd meg a jól megépített weboldalakat, és nézd meg, hogyan használják a Grid és Flex elrendezéseket éles környezetben. A vizuális overlayok megfoghatóvá és interaktívvá teszik az elvont fogalmakat (fr egységek, auto-fit, justify-content).
Ellenőrizd, hogy az oldalon lévő összes kártyarács azonos oszlopszámot és gap értékeket használ-e. Az overlay azonnal láthatóvá teszi az inkonzisztenciákat — egy 20px-es gap-et használó és egy 24px-eset használó szakasz azonnal szembetűnik.
Nyisd meg a DevSuite Pro lebegő dockot, és kattints a Grid/Flex Vizualizáló ikonjára. Az eszköz átvizsgálja az oldalt, és felismeri az összes Grid és Flex konténert.
Minden Grid és Flex konténer kap egy színes keretből álló overlayt. Egy panel felsorolja az összes észlelt konténert a típusukkal (Grid vagy Flex) és az elem szelektor megjelölésével.
Kattints bármely konténerre a teljes elrendezési tulajdonságainak megtekintéséhez. A Grid konténerek mutatják a sávvonalakat és méreteket; a Flex konténerek mutatják a tengelyirányokat és igazítást.
Minden gyerekelem megjeleníti a kiszámított méretét és az elrendezésspecifikus tulajdonságait (flex-grow, grid-area). Értsd meg, hogyan oszlik el a hely a gyerekelemek között.
Kattints ismét az eszköz ikonjára az összes overlay eltávolításához és a normál oldalos nézethez való visszatéréshez.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 39+ fejlesztői eszközt böngészőjéhez.
