Tökéletes Flexbox elrendezések létrehozása

Vizualizálja, testreszabhatja és generálhatja a CSS flexbox kódot intuitív fogd és vidd felületünkkel.

Tároló tulajdonságai

Elem tulajdonságai

3 items

Preview

Item 1
Item 2
Item 3
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }
Generált CSS-kód

Népszerű Flexbox előbeállítások

Középre vízszintesen és függőlegesen

Content

Tökéletes logó, gomb vagy bármilyen elem vízszintes és függőleges középre állítására.

Egyenlő térköz

Item 1
Item 2
Item 3

Egyenlő távolságot hozhat létre az elemek között a térköz vagy a környező térköz között.

Függőleges menü

Home
About
Contact

Hozzon létre egy függőleges navigációs menüt konzisztens térközzel és igazítással.

Reszponzív rács

Box 1
Box 2
Box 3
Box 4
Box 5

Hozzon létre egy rugalmas rácselrendezést, amely a rendelkezésre álló terület alapján tördeli az elemeket.

Hős zászló

Főcím

Hős rész cselekvésre ösztönzéssel

Tervezz egy hős zászlót címmel, felirattal és cselekvésre ösztönző gombbal.

Lábléc elrendezése

Company

About Us

Careers

Support

Súgó

Kapcsolat

© 2023-as Flexbox generátor

Készítsen reszponzív láblécet kisebb képernyőkön halmozódó oszlopokkal.

Valós példák

Navigációs sáv

Logo
Home
Products
About
Contact

Közös navigációs sáv elrendezés logóval a bal oldalon, menüelemekkel középen és kosár ikonnal a jobb oldalon.

Card Grid

Kártya címe

A kártya leírásának szövege itt

Kártya címe

A kártya leírásának szövege itt

Kártya címe

A kártya leírásának szövege itt

Reszponzív kártyarács, amely a flexbox tulajdonságainak használatával alkalmazkodik a különböző képernyőméretekhez.

Cikk elrendezése

Cikk címe

közzétéve: január 1, 2023 · Olvasási idő: 5 perc

A cikk tartalma itt. Ez lehet egy rövid összefoglaló vagy a cikk teljes szövege. A Flexbox segít a kép és a szöveg tetszetős igazításában.

Közös cikkelrendezés a bal oldalon egy képpel, a jobb oldalon pedig szöveges tartalommal, mobileszközökön egymásra rakva.

Irányítópult elrendezése

Header
Sidebar
Fő tartalom
Footer

Irányítópult-elrendezés fejlécgel, oldalsávval, fő tartalomterülettel és lábléccel, amely flexboxot használ a vízszintes és függőleges igazításhoz.

A Flexbox alapjai

Mi az a Flexbox?

A rugalmas dobozelrendezés, közismert nevén Flexbox, egy CSS3 elrendezési modell, amely hatékony módot kínál a tárolóban lévő elemek közötti térelosztásra és igazításra, még akkor is, ha méretük ismeretlen vagy dinamikus.

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

Főbb fogalmak:A Flexbox két fő koncepciót vezet be: aFlex konténer and the rugalmas elemek. A tároló a szülőelem, az elemek pedig a közvetlen gyermekei.

Főtengely vs kereszttengely

A Flexbox elrendezések két tengelyen alapulnak: amain axis and the kereszttengely.

  • Fő tengely:Az elsődleges tengely, amely mentén a rugalmas elemek el vannak rendezve. Meghatároztaflex-direction.
  • Kereszttengely:A tengely merőleges a főtengelyre. Iránya a főtengely irányától függ.
Főtengely →
← Kereszttengely
Start
Main
End

Tároló tulajdonságai

Property Description
display Rugalmas tárolót határoz meg; beágyazott vagy blokk a megadott értéktől függően.
flex-direction Meghatározza a főtengelyt, így meghatározza, hogy a flex cikkek milyen irányban kerüljenek a flex tárolóba.
flex-wrap Alapértelmezés szerint a rugalmas elemek mind megpróbálnak elférni egy sorban. Ezt módosíthatja, és engedélyezheti az elemek szükség szerinti tördelését ezzel a tulajdonsággal.
justify-content A rugalmas elemeket a rugalmas tároló aktuális vonalának főtengelye mentén igazítja.
align-items A rugalmas elemeket a rugalmas tároló aktuális vonalának kereszttengelye mentén igazítja.
align-content Igazítja a rugalmas tároló vonalait, ha a kereszttengelyen több hely van.

Elem tulajdonságai

Property Description
order Alapértelmezés szerint a rugalmas tételek a forrásrendelésben vannak elrendezve. Aordertulajdonság szabályozza, hogy milyen sorrendben jelenjenek meg a rugalmas tárolóban.
flex-grow Meghatározza a rugalmas elem szükség esetén történő növekedésének képességét. Egység nélküli értéket fogad el, amely arányként szolgál.
flex-shrink Meghatározza, hogy a rugalmas elem szükség esetén csökkenjen.
flex-basis Meghatározza a rugalmasidős cikk kezdeti méretét, mielőtt a rendelkezésre álló terület a rugalmasidő-tényezők szerint eloszlik.
align-self Lehetővé teszi az alapértelmezett igazítást (vagy aalign-items) felülbírálandó az egyes flex tételek esetében.

Related Tools

CSS szépítő

Formázza és szépítse CSS-kódját professzionális pontossággal

Ceruza a CSS átalakítóhoz

Alakítsa át SCSS-kódját CSS-re. Gyors, egyszerű és biztonságos.

SCSS-CSS átalakító

Alakítsa át SCSS-kódját CSS-re. Gyors, egyszerű és biztonságos.

Pantone-ról RGB-re

Konvertálja a Pantone színeket RGB értékekké a digitális tervezéshez

Konvertálja az XML-t JSON-ba könnyedén

XML-adatait egyetlen kattintással strukturált JSON formátumba alakíthatja. Gyors, biztonságos és teljesen böngészőalapú.

Százalékos Kalkulátor

Könnyen kiszámíthatja a százalékokat intuitív százalékkalkulátorunkkal.