⭐ 0
🔍
Szöveg Kép PDF és Dokumentumok Hang Zene Elektronika Idő Segédprogramok Validátorok Ezotéria Játékok

Divízió középre helyezése CSS-ben (Flexbox)

Készítsen CSS flexbox elrendezést vizuálisan: flexibilis irány, tartalom igazítása, elemek igazítása, flexiós körítés és rés a tárolón, plusz gyermekenkénti flex-növekedés, flex-zsugorodás és hajlítási alap, mindez élő előnézettel és másolható CSS-sel.

Feldolgozás... 0%

Eredmény

Íme a közvetlen válasz a CSS-ben leggyakrabban feltett kérdésre: div középre helyezéséhez helyezze a displayt: flex, justify-content: center és align-items: középre a szülőre. Ennyi – három nyilatkozat a tartályon, és a gyermek tökéletesen középen ül benne vízszintesen és függőlegesen is, bármilyen méretben. Ez az oldal pontosan azzal a kombinációval nyitja meg a generátort, amelyet már alkalmaztunk, így az alábbi előnézet azt mutatja, hogy jelenleg három számozott mezőn működik.

A flexbox előtt a div központosításához feltörésekre volt szükség: margó: 0 auto csak vízszintesen középre igazítva és csak fix szélességű blokkon működött; A függőleges központosítás pozíciót jelentett: abszolút negatív margókkal vagy transzformációs trükkel, mindkettő törékeny abban a pillanatban, amikor a tartalom mérete megváltozik. Az justify-content a főtengelyt, az align-ites pedig a kereszttengelyt kezeli – együtt mindkét irányba középpontba helyezkednek, függetlenül attól, hogy milyen magas vagy széles a gyermek, pontosan ezért lett ez a pár a szokásos válasz.

Húzza el bármelyik vezérlőt alább, és figyelje, hogy a három előnézeti mező középen marad, ahogy a tároló alakja megváltozik, vagy hézagot alakít ki közöttük. Ha jól néz ki, másolja be az alján található CSS-blokkot egyenesen a stíluslapjába – minden modern böngészőben ugyanúgy fut, nincs szükség könyvtárra.

🛡️
Böngészőben futtatva

A fájljaid és bemeneteid soha nem hagyják el ezt az eszközt. A feldolgozás teljesen offline módon történik. 100% biztonságos.

Elfogadott formátumok és szabályok

  • Tárolóvezérlők: hajlítási irány, tartalom igazítása, elemek igazítása, rugalmas tördelése és résbevitel pixelekben, élőben alkalmazva az előnézetre.
  • Alapértelmezés szerint három színkódolt gyermekdoboz (maximum nyolc hozzáadása, kettő eltávolítása), mindegyik saját rugalmas növekedési, rugalmas zsugorítási és rugalmas alapú mezőkkel.
  • Másolható CSS-blokk .flex-container szabállyal és gyermekenként egy .flex-item-N szabállyal, amely nem alapértelmezett flex tulajdonságokkal rendelkezik.

Főbb előnyök

✓ Minden konténervezérlő, valamint minden gyermek rugalmas növekedése, flexibilis zsugorítása és flexiós alapja három számozott előnézeti mezőt frissít élőben, így pontosan láthatja, mit csinálnak a flexbox-szabályok, mielőtt megérintené a stíluslapot.
✓ A generátor csak olyan gyermekszabályokat nyomtat ki, amelyek ténylegesen eltérnek a CSS alapértelmezéseitől, így a másolt kód rövid és olvasható marad, ahelyett, hogy a flex-grow-t újraírná: 0 minden dobozon.
✓ Az előre beállított oldalak megoldják a név szerint keresett elrendezéseket: div középre helyezése, logó bal oldali hivatkozások jobb oldali navigációs sávja és azonos szélességű rugalmas oszlopok – nyissa meg az egyiket, és az eszköz már be van állítva.

Felhasználási területek

  • • Szerezze meg a pontos CSS-t, hogy vízszintesen és függőlegesen is középre állíthassa a div-t, és figyelje, ahogy az elemek sorkizárása és igazítása működik az élő előnézeti mezőkön.
  • • Hozzon létre egy logó bal oldali, linkek jobb oldali navigációs sáv elrendezését szóközzel és igazítással: középre, majd másolja be a tároló CSS-jét egyenesen a fejléc összetevőjébe.
  • • Hasonlítsa össze a térközt, a térközt és az egyenletes térközt egymás mellett ugyanazon a három dobozon, ahelyett, hogy kitalálná, melyik felel meg a kívánt térköznek.