Sukurkite tobulus "Flexbox" išdėstymus

Vizualizuokite, tinkinkite ir generuokite CSS flexbox kodą naudodami mūsų intuityvią nuvilkimo sąsają.

Konteinerio ypatybės

Elemento ypatybės

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; }
Sugeneruotas CSS kodas

Populiarūs "Flexbox" išankstiniai nustatymai

Centruokite horizontaliai ir vertikaliai

Content

Puikiai tinka logotipo, mygtuko ar bet kurio elemento centravimui tiek horizontaliai, tiek vertikaliai.

Lygūs tarpai

Item 1
Item 2
Item 3

Sukurkite vienodus tarpus tarp elementų naudodami tarpą tarp arba tarpą aplink.

Vertikalus meniu

Home
About
Contact

Sukurkite vertikalų naršymo meniu su nuosekliais tarpais ir lygiuote.

Reaguojantis tinklelis

Box 1
Box 2
Box 3
Box 4
Box 5

Sukurkite reaguojantį tinklelio maketą, kuris perkelia elementus pagal laisvą vietą.

Herojaus reklamjuostė

Pagrindinė antraštinė dalis

Herojaus skyrius su raginimu veikti

Sukurkite herojaus reklamjuostę su pavadinimu, paantrašte ir raginimo veikti mygtuku.

Poraštės maketas

Company

About Us

Careers

Support

Pagalbos centras

Susisiekite su mumis

© 2023 m. "Flexbox" generatorius

Sukurkite reaguojančią poraštę su stulpeliais, kurie sudedami mažesniuose ekranuose.

Realaus pasaulio pavyzdžiai

Naršymo juosta

Logo
Home
Products
About
Contact

Įprastas naršymo juostos maketas su logotipu kairėje, meniu elementais centre ir krepšelio piktograma dešinėje.

Card Grid

Kortelės pavadinimas

Kortelės aprašymo tekstas čia

Kortelės pavadinimas

Kortelės aprašymo tekstas čia

Kortelės pavadinimas

Kortelės aprašymo tekstas čia

Reaguojantis kortelių tinklelis, prisitaikantis prie skirtingų dydžių ekranų, naudojant "flexbox" ypatybes.

Straipsnio išdėstymas

Straipsnio pavadinimas

Paskelbta sausio 1, 2023 · 5 min. skaitymo

Straipsnio turinys čia. Tai gali būti trumpa santrauka arba visas straipsnio tekstas. "Flexbox" padeda vizualiai patraukliai sulygiuoti vaizdą ir tekstą.

Įprastas straipsnio maketas su vaizdu kairėje ir teksto turiniu dešinėje, sudėtas mobiliuosiuose įrenginiuose.

Prietaisų skydelio išdėstymas

Header
Sidebar
Pagrindinis turinys
Footer

Ataskaitų srities maketas su antrašte, šonine juosta, pagrindine turinio sritimi ir porašte, naudojant "flexbox" horizontaliam ir vertikaliam lygiavimui.

"Flexbox" pagrindai

Kas yra "Flexbox"?

Lankstus dėžutės išdėstymas, paprastai žinomas kaip "Flexbox", yra CSS3 išdėstymo modelis, suteikiantis efektyvų būdą paskirstyti ir sulygiuoti erdvę tarp konteinerio elementų, net jei jų dydis nežinomas arba dinamiškas.

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

Pagrindinės sąvokos:"Flexbox" pristato dvi pagrindines sąvokas:lankstus konteineris and the lankstūs elementai. Konteineris yra pirminis elementas, o elementai yra jo tiesioginiai antriniai elementai.

Pagrindinė ašis prieš kryžminę ašį

"Flexbox" išdėstymai yra pagrįsti dviem ašimis:main axis and the Kryžminė ašis.

  • Pagrindinė ašis:Pirminė ašis, išilgai kurios išdėstyti lankstūs daiktai. Apibrėžėflex-direction.
  • Kryžminė ašis:Ašis statmena pagrindinei ašiai. Jo kryptis priklauso nuo pagrindinės ašies krypties.
Pagrindinės ašies →
← Kryžminė ašis
Start
Main
End

Konteinerio ypatybės

Property Description
display Apibrėžia lankstų konteinerį; Inline arba blokas, priklausomai nuo nurodytos vertės.
flex-direction Nustato pagrindinę ašį, taip apibrėždamas kryptį, kuria lankstūs daiktai dedami į lankstų konteinerį.
flex-wrap Pagal numatytuosius nustatymus visi lankstūs elementai bandys tilpti į vieną eilutę. Galite tai pakeisti ir leisti elementams prireikus apvynioti šią savybę.
justify-content Išlygiuoja lanksčius elementus išilgai dabartinės lankstaus konteinerio linijos pagrindinės ašies.
align-items Išlygiuoja lanksčius elementus išilgai dabartinės lankstaus konteinerio linijos skersinės ašies.
align-content Sulygiuoja lankstaus konteinerio linijas, kai kryžminėje ašyje yra papildomos vietos.

Elemento ypatybės

Property Description
order Pagal numatytuosius nustatymus lankstūs elementai išdėstomi šaltinio tvarka. TačiauorderNuosavybė kontroliuoja tvarką, kuria jie rodomi "Flex" konteineryje.
flex-grow Apibrėžia lankstaus daikto galimybę augti, jei reikia. Jis priima vienetinę vertę, kuri tarnauja kaip proporcija.
flex-shrink Apibrėžia lankstaus daikto galimybę, jei reikia, susitraukti.
flex-basis Apibrėžia pradinį lankstaus elemento dydį prieš paskirstant bet kokią laisvą erdvę pagal lankstumo veiksnius.
align-self Leidžia numatytąją lygiuotę (arba tą, kurią nurodėalign-items), kurie turi būti viršesni už atskirus lanksčius elementus.

Related Tools

Rašiklis į CSS Konverteris

Transformuokite savo SCSS kodą į CSS. Greita, paprasta ir saugu.

SCSS į CSS keitiklis

Transformuokite savo SCSS kodą į CSS. Greita, paprasta ir saugu.

Sass į CSS Konverteris

Paverskite savo Sass kodą į CSS. Greita, paprasta ir saugu.

Sukurkite gražius CSS krautuvus

Sukurkite pasirinktines CSS įkėlimo animacijas per kelias sekundes naudodami mūsų intuityvią nuvilkimo sąsają. Kodavimo nereikia!

"Base64" kodavimo ir dekodavimo įrankių rinkinys

Lengvai užkoduokite ir iššifruokite "Base64" eilutes tiesiog naršyklėje.

Dešimtainis skaičius iki šešiakampio

Dešimtainių skaičių konvertavimas į šešioliktainius be vargo