Buat Tata Letak Flexbox yang Sempurna

Visualisasikan, sesuaikan, dan hasilkan kode flexbox CSS dengan antarmuka seret dan lepas kami yang intuitif.

Properti Kontainer

Properti Barang

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 yang dihasilkan

Preset Flexbox Populer

Tengah Secara Horizontal

Content

Sempurna untuk memusatkan logo, tombol, atau elemen apa pun baik secara horizontal maupun vertikal.

Jarak yang sama

Item 1
Item 2
Item 3

Buat jarak yang sama antar elemen dengan spasi antara atau spasi-sekitar.

Menu Vertikal

Home
About
Contact

Buat menu navigasi vertikal dengan spasi dan perataan yang konsisten.

Kisi Responsif

Box 1
Box 2
Box 3
Box 4
Box 5

Buat tata letak kisi responsif yang membungkus item berdasarkan ruang yang tersedia.

Spanduk Pahlawan

Judul Utama

Bagian pahlawan dengan ajakan bertindak

Rancang spanduk pahlawan dengan judul, subjudul, dan tombol ajakan bertindak.

Tata Letak Footer

Company

About Us

Careers

Support

Pusat Bantuan

Hubungi

© Genset Flexbox 2023

Buat footer responsif dengan kolom yang menumpuk di layar yang lebih kecil.

Contoh Dunia Nyata

Bilah Navigasi

Logo
Home
Products
About
Contact

Tata letak bilah navigasi umum dengan logo di sebelah kiri, item menu di tengah, dan ikon keranjang di sebelah kanan.

Card Grid

Judul Kartu

Teks deskripsi kartu di sini

Judul Kartu

Teks deskripsi kartu di sini

Judul Kartu

Teks deskripsi kartu di sini

Kisi kartu responsif yang beradaptasi dengan berbagai ukuran layar menggunakan properti flexbox.

Tata Letak Artikel

Judul Artikel

Diposting pada tanggal 1 Januari 2023 · Bacaan 5 menit

Isi artikel di sini. Ini bisa berupa ringkasan singkat atau teks artikel lengkap. Flexbox membantu menyelaraskan gambar dan teks dengan cara yang menarik secara visual.

Tata letak artikel umum dengan gambar di sebelah kiri dan konten teks di sebelah kanan, ditumpuk di perangkat seluler.

Tata Letak Dasbor

Header
Sidebar
Konten utama
Footer

Tata letak dasbor dengan header, sidebar, area konten utama, dan footer menggunakan flexbox untuk penyelarasan horizontal dan vertikal.

Dasar-dasar Flexbox

Apa itu Flexbox?

Tata Letak Kotak Fleksibel, umumnya dikenal sebagai Flexbox, adalah model tata letak CSS3 yang menyediakan cara efisien untuk mendistribusikan dan menyelaraskan ruang di antara item dalam wadah, bahkan ketika ukurannya tidak diketahui atau 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 Kunci:Flexbox memperkenalkan dua konsep utama:Kontainer fleksibel and the Item fleksibel. Kontainer adalah elemen induk, dan item adalah turunan langsungnya.

Sumbu Utama vs Sumbu Silang

Tata letak Flexbox didasarkan pada dua sumbu:main axis and the sumbu silang.

  • Sumbu Utama:Sumbu utama di mana item fleksibel diletakkan. Didefinisikan olehflex-direction.
  • Sumbu Silang:Sumbu tegak lurus dengan sumbu utama. Arahnya tergantung pada arah sumbu utama.
Sumbu Utama →
← Sumbu Silang
Start
Main
End

Properti Kontainer

Property Description
display Mendefinisikan kontainer fleksibel; sebaris atau blok tergantung pada nilai yang diberikan.
flex-direction Menetapkan sumbu utama, sehingga menentukan arah item fleksibel ditempatkan di wadah fleksibel.
flex-wrap Secara default, item fleksibel semuanya akan mencoba untuk masuk ke satu baris. Anda dapat mengubahnya dan mengizinkan item untuk dibungkus sesuai kebutuhan dengan properti ini.
justify-content Menyelaraskan item fleksibel di sepanjang sumbu utama garis kontainer fleksibel saat ini.
align-items Menyelaraskan item fleksibel di sepanjang sumbu silang garis kontainer fleksibel saat ini.
align-content Menyelaraskan garis kontainer fleksibel di dalam saat ada ruang ekstra di sumbu silang.

Properti Barang

Property Description
order Secara default, item fleksibel ditata dalam urutan sumber. Namun,orderProperti mengontrol urutan kemunculannya di kontainer Flex.
flex-grow Menentukan kemampuan item fleksibel untuk tumbuh jika perlu. Ini menerima nilai tanpa unit yang berfungsi sebagai proporsi.
flex-shrink Menentukan kemampuan item fleksibel untuk menyusut jika perlu.
flex-basis Menentukan ukuran awal item fleksibel sebelum ruang yang tersedia didistribusikan sesuai dengan faktor fleksibel.
align-self Mengizinkan penyelarasan default (atau yang ditentukan olehalign-items) untuk ditimpa untuk item fleksibel individual.

Related Tools

Generator Transisi CSS3

Transisi opasitas yang mulus

Konverter Stylus ke CSS

Ubah kode SCSS Anda menjadi CSS. Cepat, mudah, dan aman.

Konverter SCSS ke CSS

Ubah kode SCSS Anda menjadi CSS. Cepat, mudah, dan aman.

Oktal ke Desimal

Konversi angka oktal ke desimal dengan mudah

Buat Gradien Teks CSS yang Indah dengan Mudah

Buat Efek Teks Gradien yang Menakjubkan untuk Situs Web Anda

Konverter CSS ke LESS

Ubah kode CSS Anda menjadi KURANG dengan variabel, bersarang, dan lainnya. Cepat, mudah, dan aman.