Buat Susun Atur Flexbox yang Sempurna

Visualisasikan, sesuaikan dan jana kod kotak fleksibel CSS dengan antara muka seret dan lepas intuitif kami.

Sifat Kontena

Sifat 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; }
Kod CSS yang dijana

Pratetap Flexbox Popular

Tengah Secara Mendatar

Content

Sesuai untuk memusatkan logo, butang atau mana-mana elemen secara mendatar dan menegak.

Jarak yang sama

Item 1
Item 2
Item 3

Cipta jarak yang sama antara elemen dengan ruang antara atau ruang sekeliling.

Menu Menegak

Home
About
Contact

Bina menu navigasi menegak dengan jarak dan penjajaran yang konsisten.

Grid Responsif

Box 1
Box 2
Box 3
Box 4
Box 5

Cipta susun atur grid responsif yang membungkus item berdasarkan ruang yang tersedia.

Sepanduk Wira

Tajuk utama

Bahagian wira dengan seruan bertindak

Reka bentuk sepanduk wira dengan tajuk, sari kata dan butang seruan tindak.

Susun atur pengaki

Company

About Us

Careers

Support

Pusat Bantuan

Hubungi Kami

© Penjana Flexbox 2023

Bina pengaki responsif dengan lajur yang disusun pada skrin yang lebih kecil.

Contoh Dunia Sebenar

Bar Navigasi

Logo
Home
Products
About
Contact

Susun atur bar navigasi biasa dengan logo di sebelah kiri, item menu di tengah, dan ikon troli di sebelah kanan.

Card Grid

Tajuk Kad

Teks penerangan kad di sini

Tajuk Kad

Teks penerangan kad di sini

Tajuk Kad

Teks penerangan kad di sini

Grid kad responsif yang menyesuaikan diri dengan saiz skrin yang berbeza menggunakan sifat flexbox.

Susun atur Rencana

Tajuk Rencana

Dihantar pada Januari 1, 2023 · Bacaan 5 minit

Kandungan artikel di sini. Ini boleh menjadi ringkasan ringkas atau teks artikel penuh. Flexbox membantu menyelaraskan imej dan teks dengan cara yang menarik secara visual.

Susun atur artikel biasa dengan imej di sebelah kiri dan kandungan teks di sebelah kanan, disusun pada peranti mudah alih.

Susun atur papan pemuka

Header
Sidebar
Kandungan utama
Footer

Susun atur papan pemuka dengan pengepala, bar sisi, kawasan kandungan utama dan pengaki menggunakan flexbox untuk penjajaran mendatar dan menegak.

Asas Flexbox

Apa itu Flexbox?

Susun atur Kotak Fleksibel, biasanya dikenali sebagai Flexbox, ialah model susun atur CSS3 yang menyediakan cara yang cekap untuk mengedarkan dan menyelaraskan ruang antara item dalam bekas, walaupun saiznya tidak diketahui atau dinamik.

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 memperkenalkan dua konsep utama:Bekas fleksibel and the Item fleksibel. Bekas ialah elemen induk, dan item ialah anak langsungnya.

Paksi Utama vs Paksi Silang

Susun atur Flexbox adalah berdasarkan dua paksi:main axis and the Paksi silang.

  • Paksi Utama:Paksi utama di mana item fleksibel dibentangkan. Ditakrifkan olehflex-direction.
  • Paksi Silang:Paksi berserenjang dengan paksi utama. Arahnya bergantung kepada arah paksi utama.
Paksi Utama →
← Paksi Silang
Start
Main
End

Sifat Kontena

Property Description
display Mentakrifkan bekas fleksibel; sebaris atau blok bergantung pada nilai yang diberikan.
flex-direction Mewujudkan paksi utama, sekali gus mentakrifkan arah item fleksibel diletakkan di dalam bekas fleksibel.
flex-wrap Secara lalai, item fleksibel semuanya akan cuba dimuatkan ke satu baris. Anda boleh mengubahnya dan membenarkan item dibungkus mengikut keperluan dengan harta ini.
justify-content Selaraskan item fleksibel di sepanjang paksi utama garisan semasa bekas fleksibel.
align-items Selaraskan item fleksibel di sepanjang paksi silang garisan semasa bekas fleksibel.
align-content Selaraskan garisan bekas fleksibel di dalam apabila terdapat ruang tambahan dalam paksi silang.

Sifat Item

Property Description
order Secara lalai, item fleksibel dibentangkan dalam susunan sumber. Walau bagaimanapun,orderSifat mengawal tertib ia muncul dalam bekas fleksibel.
flex-grow Mentakrifkan keupayaan untuk item fleksibel berkembang jika perlu. Ia menerima nilai tanpa unit yang berfungsi sebagai perkadaran.
flex-shrink Mentakrifkan keupayaan untuk item fleksibel mengecut jika perlu.
flex-basis Mentakrifkan saiz awal item fleksibel sebelum mana-mana ruang yang tersedia diagihkan mengikut faktor fleksibel.
align-self Membenarkan penjajaran lalai (atau yang ditentukan olehalign-items) untuk diganti untuk item fleksibel individu.

Related Tools

Buat Susun Atur Flexbox yang Sempurna

Visualisasikan, sesuaikan dan jana kod kotak fleksibel CSS dengan antara muka seret dan lepas intuitif kami.

Penukar Stylus kepada CSS

Ubah kod SCSS anda kepada CSS. Pantas, mudah dan selamat.

Penukar SCSS kepada CSS

Ubah kod SCSS anda kepada CSS. Pantas, mudah dan selamat.

Kalkulator Cincang CRC-32

Jana jumlah semak CRC-32 dengan cepat dan mudah

HSV kepada RGB

Tukar kod warna HSV kepada nilai RGB untuk pembangunan web

Kalkulator Peratusan

Kira peratusan dengan mudah dengan kalkulator peratusan intuitif kami.