Ustvarite popolne postavitve Flexbox

Vizualizirajte, prilagodite in ustvarite kodo CSS flexbox z našim intuitivnim vmesnikom s funkcijo povleci in spusti.

Lastnosti vsebnika

Lastnosti elementa

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; }
Ustvarjena koda CSS

Priljubljene prednastavitve Flexboxa

Centriraj vodoravno in navpično

Content

Idealno za centriranje logotipa, gumba ali katerega koli elementa tako vodoravno kot navpično.

Enak razmik

Item 1
Item 2
Item 3

Ustvarite enak razmik med elementi s presledkom med njimi ali presledkom okoli njih.

Navpični meni

Home
About
Contact

Zgradite navpični navigacijski meni z doslednim razmikom in poravnavo.

Odzivna mreža

Box 1
Box 2
Box 3
Box 4
Box 5

Ustvarite odzivno mrežno postavitev, ki elemente prelomi glede na razpoložljivi prostor.

Junaški transparent

Glavni naslov

Glavni del s pozivom k dejanju

Oblikujte glavni banner z naslovom, podnaslovom in gumbom za poziv k dejanju.

Postavitev noge

Company

About Us

Careers

Support

Center za pomoč

Kontaktirajte nas

© 2023 Generator Flexbox

Ustvarite odzivno nogo s stolpci, ki se nalagajo na manjših zaslonih.

Primeri iz resničnega sveta

Navigacijska vrstica

Logo
Home
Products
About
Contact

Običajna postavitev navigacijske vrstice z logotipom na levi, elementi menija na sredini in ikono košarice na desni.

Card Grid

Naslov kartice

Opis kartice tukaj

Naslov kartice

Opis kartice tukaj

Naslov kartice

Opis kartice tukaj

Odzivna mreža kartic, ki se prilagaja različnim velikostim zaslona z uporabo lastnosti flexbox.

Postavitev članka

Naslov članka

Objavljeno 1. januarja 2023 · 5 min branja

Vsebina članka tukaj. To je lahko kratek povzetek ali celotno besedilo članka. Flexbox pomaga poravnati sliko in besedilo na vizualno privlačen način.

Običajna postavitev članka s sliko na levi in ​​besedilom na desni, naložena na mobilnih napravah.

Postavitev nadzorne plošče

Header
Sidebar
Glavna vsebina
Footer

Postavitev nadzorne plošče z glavo, stransko vrstico, glavnim območjem vsebine in nogo z uporabo flexboxa za vodoravno in navpično poravnavo.

Osnove Flexboxa

Kaj je Flexbox?

Prilagodljiva postavitev polja, splošno znana kot Flexbox, je model postavitve CSS3, ki zagotavlja učinkovit način za porazdelitev in poravnavo prostora med elementi v vsebniku, tudi če je njihova velikost neznana ali dinamična.

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).

Ključni koncepti:Flexbox uvaja dva glavna koncepta:fleksibilna posoda and the fleksibilni elementiVsebnik je nadrejeni element, elementi pa so njegovi neposredni podrejeni elementi.

Glavna os proti prečni osi

Postavitve Flexbox temeljijo na dveh oseh:main axis and the prečna os.

  • Glavna os:Primarna os, vzdolž katere so razporejeni fleksibilni elementi. Določeno zflex-direction.
  • Prečna os:Os je pravokotna na glavno os. Njena smer je odvisna od smeri glavne osi.
Glavna os →
← Prečna os
Start
Main
End

Lastnosti vsebnika

Property Description
display Definira fleksibilni vsebnik; linijski ali blokovni, odvisno od dane vrednosti.
flex-direction Določi glavno os in s tem določi smer, v katero so fleksibilni elementi postavljeni v fleksibilni vsebnik.
flex-wrap Privzeto se bodo vsi elementi flex poskušali prilegati eni vrstici. To lahko s to lastnostjo spremenite in omogočite elementom, da se po potrebi prelomijo.
justify-content Poravna fleksibilne elemente vzdolž glavne osi trenutne vrstice fleksibilnega vsebnika.
align-items Poravna fleksibilne elemente vzdolž prečne osi trenutne vrstice fleksibilnega vsebnika.
align-content Poravna črte fleksibilnega vsebnika znotraj, ko je v prečni osi dodaten prostor.

Lastnosti elementa

Property Description
order Privzeto so fleksibilni elementi razporejeni v vrstnem redu izvora. Vendar paorderLastnost nadzoruje vrstni red, v katerem se pojavijo v vsebniku flex.
flex-grow Določa zmožnost fleksibilnega elementa, da se po potrebi poveča. Sprejema vrednost brez enot, ki služi kot razmerje.
flex-shrink Določa sposobnost fleksibilnega elementa, da se po potrebi skrči.
flex-basis Določa začetno velikost fleksibilnega elementa, preden se razpoložljivi prostor porazdeli glede na faktorje fleksibilnosti.
align-self Omogoča privzeto poravnavo (ali tisto, ki jo določaalign-items) ki se preglasi za posamezne fleksibilne elemente.

Related Tools

Pretvornik Sass v CSS

Pretvorite svojo Sass kodo v CSS. Hitro, enostavno in varno.

Ustvarite popolne postavitve Flexbox

Vizualizirajte, prilagodite in ustvarite kodo CSS flexbox z našim intuitivnim vmesnikom s funkcijo povleci in spusti.

Pretvornik pisala v CSS

Pretvorite svojo kodo SCSS v CSS. Hitro, enostavno in varno.

Ustvarite čudovit CSS besedilni gradient brez napora

Ustvarite osupljive učinke preliva besedila za svojo spletno stran

Orodje za kodiranje Base64

Z lahkoto kodirajte besedilo v format Base64 kar v brskalniku.

Kalkulator zgoščevalne vrednosti SHA-1

Hitro in enostavno ustvarite zgoščene vrednosti SHA-1