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

justify-content: space-beween Explained (CSS)

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

Ez az oldal nyitja meg a generátort, ahol az igazítási tartalom a space-beállításra van beállítva: az első doboz a konténer kezdő élével egy síkban, az utolsó doboz a végélével egy síkban ül, és a maradék tér egyenlő résekre van felosztva a középen lévő dobozok között – soha az első előtt vagy az utolsó után.

Ez az a részlet, amit az emberek összekevernek. A térköz minden doboz mindkét oldalán egyenlő margót ad, így a dobozok közötti hézagok kétszer olyan szélesek, mint a két külső szélén lévő rések (mindegyik él csak egy doboz margóját kapja, nem kettőt). A téregyenletesen továbbmegy, és minden rést egyforma méretűvé tesz, beleértve a két külső élt is – ez az egyetlen a három közül, ahol a távolság tökéletesen egyenletesnek tűnik végig.

Váltson az indokolás-tartalom legördülő menüben az alábbi három érték között, és nézze meg, ahogy ugyanaz a három doboz átrendeződik – ez a leggyorsabb módja annak, hogy megtekintse a különbséget ahelyett, hogy megjegyezné. Másolja ki a CSS-t, amelyik megfelel a ténylegesen kívánt térköznek.

🛡️
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.