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

CSS Flexbox navigációs sáv – logó balra, linkek jobbra

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 megnyitja a flexbox generátort, amely a klasszikus navigációs sáv elrendezésére van beállítva: a sorkizárt tartalom szóközre van állítva, az elemek igazítása pedig középre állítva. Helyezzen egy logót az első mezőbe, és egy sor navigációs hivatkozást az utolsóba (vagy ossza el a hivatkozásokat a középső mezők között), és a flexbox tároló a sáv két másik végére tolja őket, miközben minden elemet ugyanabban a függőleges középpontban tart, függetlenül attól, milyen magas a logó vagy a hivatkozás szövege.

A szóköz teszi ezt a működést: az első gyermeket a kezdő élre, az utolsó gyermeket pedig a végélre tűzi, majd a többi gyermeket egyenletesen elosztja közöttük – pontosan a bal oldali logó, a jobb oldali hivatkozások formája szinte minden webhelyfejléc. align-items: a központ ezután megoldja a függőleges igazítást, amelyhez korábban sormagasság-hackekre vagy táblázatcella-megjelenítési trükkökre volt szükség.

Állítsa be a gyermekek számát, hogy megfeleljen a valódi navigációs sávnak – két négyzet a csupasz logó- és CTA-sávhoz, több az emblémához és több link –, és nézze meg élőben az elrendezés adaptálását. Másolja ki a CSS-blokkot, ha az megegyezik a fejlécével, vagy nyissa meg az előre beállított szóközt, ha meg szeretné tekinteni egy tulajdonságot a közeli rokonaival.

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