Nggawe Layouts Flexbox Sampurna

Visualisasi, ngatur, lan ngasilake kode flexbox CSS nganggo antarmuka seret lan selehake intuisi.

Properties Wadhah

Properties item

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; }
Kode CSS digawe

Preset Flexbox sing populer

Pusat Horizontal

Content

Sampurna kanggo pusat logo, tombol, utawa unsur apa wae kanthi horisontal lan vertikal.

Spasi sing padha

Item 1
Item 2
Item 3

Nggawe jarak sing padha ing antarane unsur kanthi spasi-antara utawa spasi-mubeng.

Menu vertikal

Home
About
Contact

Gawe menu navigasi vertikal kanthi jarak lan keselarasan sing konsisten.

Grid responsif

Box 1
Box 2
Box 3
Box 4
Box 5

Nggawe tata letak kothak responsif sing mbungkus item adhedhasar papan sing kasedhiya.

Spanduk Pahlawan

Judul Utama

bagean pahlawan karo telpon kanggo tumindak

Rancang spanduk pahlawan kanthi judhul, subtitle, lan tombol ajakan tumindak.

Layout Footer

Company

About Us

Careers

Support

Pusat Bantuan

Hubungi Kita

© 2023 Flexbox Generator

Gawe footer responsif kanthi kolom sing ditumpuk ing layar sing luwih cilik.

Tuladha Nyata-Donya

Bar navigasi

Logo
Home
Products
About
Contact

Tata letak garis navigasi umum kanthi logo ing sisih kiwa, item menu ing tengah, lan lambang cart ing sisih tengen.

Card Grid

Judhul kertu

Teks katrangan kertu ing kene

Judhul kertu

Teks katrangan kertu ing kene

Judhul kertu

Teks katrangan kertu ing kene

Kothak kertu responsif sing cocog karo ukuran layar sing beda-beda nggunakake properti flexbox.

Tata letak artikel

Judul Artikel

Dikirim ing Januari 1, 2023 · 5 menit maca

Isi artikel ing kene. Iki bisa dadi ringkesan ringkes utawa teks artikel lengkap. Flexbox mbantu nyelarasake gambar lan teks kanthi cara sing apik.

Tata letak artikel umum kanthi gambar ing sisih kiwa lan isi teks ing sisih tengen, ditumpuk ing piranti seluler.

Tata Letak Dasbor

Header
Sidebar
Isi Utama
Footer

Tata letak dashboard kanthi header, sidebar, area konten utama, lan footer nggunakake flexbox kanggo keselarasan horisontal lan vertikal.

Dhasar Flexbox

Apa Flexbox?

Layout Box Fleksibel, umume dikenal minangka Flexbox, yaiku model tata letak CSS3 sing nyedhiyakake cara sing efisien kanggo nyebarake lan nyelarasake spasi ing antarane item ing wadhah, sanajan ukurane ora dingerteni utawa dinamis.

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

Konsep Utama:Flexbox ngenalake rong konsep utama: ingwadhah fleksibel and the item fleksibel. Wadah kasebut minangka unsur induk, lan barang kasebut minangka anak langsung.

Axis Utama vs Cross Axis

Tata letak Flexbox adhedhasar rong sumbu: ingmain axis and the sumbu silang.

  • Axis utama:Sumbu utami ing sadawane barang lentur ditata. Ditetepake deningflex-direction.
  • Cross Axis:Sumbu tegak karo sumbu utama. Arah kasebut gumantung ing arah sumbu utama.
Sumbu Utama →
← Cross Axis
Start
Main
End

Properties Wadhah

Property Description
display Nemtokake wadhah fleksibel; inline utawa pamblokiran gumantung ing Nilai diwenehi.
flex-direction Nggawe sumbu utama, saéngga nemtokake arah barang lentur sing diselehake ing wadhah lentur.
flex-wrap Kanthi gawan, item fleksibel kabeh bakal nyoba pas menyang siji baris. Sampeyan bisa ngganti lan ngidini item kanggo mbungkus minangka needed karo properti iki.
justify-content Nyelarasake item lentur ing sadawane sumbu utama garis saiki saka wadhah lentur.
align-items Nyelarasake item lentur ing sadawane sumbu salib garis saiki saka wadhah lentur.
align-content Nyelarasake garis wadhah sing fleksibel nalika ana spasi ekstra ing sumbu silang.

Properties item

Property Description
order Kanthi gawan, item fleksibel ditata ing urutan sumber. Nanging, ingorderproperty kontrol supaya padha katon ing wadhah lentur.
flex-grow Nemtokake kemampuan kanggo item fleksibel kanggo tuwuh yen perlu. Iki nampa nilai tanpa unit sing dadi proporsi.
flex-shrink Nemtokake kemampuan kanggo item fleksibel kanggo nyilikake yen perlu.
flex-basis Nemtokake ukuran awal item fleksibel sadurunge papan sing kasedhiya disebarake miturut faktor fleksibel.
align-self Ngidini alignment standar (utawa sing ditemtokake deningalign-items) kanggo diganti kanggo item fleksibel individu.

Related Tools

Konverter SCSS menyang CSS

Ganti kode SCSS sampeyan dadi CSS. Cepet, gampang, lan aman.

Nggawe Transformasi CSS3 kanthi Gampang

Alat sing kuat lan intuisi kanggo nggawe transformasi CSS3 sing kompleks tanpa nulis kode. Visualisasi owah-owahan ing wektu nyata lan salin CSS sing digawe kanggo digunakake ing proyek sampeyan.

Nggawe Layouts Flexbox Sampurna

Visualisasi, ngatur, lan ngasilake kode flexbox CSS nganggo antarmuka seret lan selehake intuisi.

Ngonversi JSON menyang TSV kanthi gampang

Ganti data JSON menyang format Tab-Separated Values ​​(TSV) kanthi siji klik. Cepet, aman, lan adhedhasar browser.

Alat Encode Base64

Encode teks menyang format Base64 kanthi gampang ing browser sampeyan.

HSV kanggo RGB

Ngonversi kode warna HSV dadi nilai RGB kanggo pangembangan web