Cara Menggunakan Flex untuk Menyelaraskan Elemen HTML

Properti flex di CSS memungkinkan Anda untuk menyelaraskan item dengan lebih fleksibel dan responsif. Ini membuatnya berguna ketika Anda ingin elemen HTML Anda menjadi lebih responsif di dalam browser web.

Artikel ini akan membahas bagaimana Anda dapat menggunakan properti fleksibel tertentu. Ini termasuk properti flex-direction, justify-content, align-self, align-items, align-content, dan gap.

Cara Mengatur Tampilan Fleksibel CSS

Contoh struktur yang dapat Anda gunakan untuk mengeksplorasi dasar-dasar flexbox adalah satu set div anak di bawah div orang tua tunggal. Dalam kode di bawah ini, ada div "induk" utama. Tiga div anak mewakili item yang dapat Anda ratakan menggunakan properti fleksibel.

Agar gaya fleksibel apa pun berfungsi, Anda perlu menambahkan tampilan: fleksibel properti ke wadah fleksibel induk.

.induk {
 tampilan: fleksibel;
}

Tanpa flex, div anak ditampilkan satu demi satu dalam formasi kolom di bawah halaman.

Untuk melihat contoh pengaturan ini, lihat dan jalankan kode dalam ini cuplikan CodePen.

Cara Mengontrol Arah Tata Letak

Itu arah fleksibel properti menentukan arah baris atau kolom dari item anak.

Opsi untuk properti flex-direction meliputi:

arah fleksibel: baris | kolom | baris-terbalik | kolom-terbalik

Anda perlu menambahkan wadah induk di sekitar item yang ingin Anda ratakan.

HTML:

CSS:

.red { warna latar belakang: merah; }
.oranye { warna latar: oranye; }
.kuning { warna latar: kuning; }
.hijau { warna latar belakang: hijau;}
.blue { warna latar belakang: biru; }
.purple { warna latar belakang: ungu; }
.div induk {
 lebar: 40 piksel;
 tinggi: 40 piksel;
}

Terapkan properti flex-direction ke wadah flex induk. Ini akan menyelaraskan item div anak.

.induk {
 lebar: 300 piksel;
 tampilan: fleksibel; 
 arah fleksibel: baris;
}

Banyak properti flex mengacu pada konsep sumbu utama dan sumbu silang. Ketika arah fleksibel adalah baris, sumbu utama mewakili arah horizontal, dan sumbu silang mewakili vertikal. Nilai kolom mengalihkan sumbu ini.

Lihat kode untuk properti flex-direction di this cuplikan CodePen untuk melihat beberapa contoh.

Cara Menyejajarkan Item di Sepanjang Cross Axis

Itu sejajarkan-item properti mengontrol penyelarasan item di sepanjang sumbu silang. Untuk default flex-direction, row, align-items mengontrol perataan vertikal item.

Opsi untuk properti align-items meliputi:

align-item: mulai fleksibel | ujung fleksibel | sejajarkan-item | meregang

Tambahkan properti align-items ke wadah induk untuk menyelaraskan anak-anaknya.

.induk {
 tampilan: fleksibel; 
 align-item: mulai fleksibel;
}

Selain itu, Anda dapat memilih untuk menyelaraskan item menggunakan garis dasar. Secara default, opsi garis dasar meratakan semua item berdasarkan dasar item.

Anda juga dapat memilih dari mana garis dasar dimulai, seperti bagian atas (garis dasar pertama) atau bagian bawah (garis dasar terakhir).

align-item: baseline | dasar pertama | dasar terakhir;

Agar align-items: baseline berfungsi, pastikan setiap item memiliki tinggi atau lebar yang berbeda (bergantung pada sumbu yang Anda gunakan).

​​​

Lihat kode untuk properti align-items di this cuplikan CodePen untuk melihat beberapa contoh.

Cara Mengganti Penjajaran pada Item Individual

Anda dapat menggunakan menyelaraskan diri properti untuk mengganti gaya align-items apa pun dari wadah induk. Ini berarti Anda dapat mengatur perataan fleksibel terpisah pada item individual.

Opsi untuk properti align-self meliputi:

menyelaraskan diri: otomatis | mulai fleksibel | ujung fleksibel | tengah | dasar | meregang

Katakan misalnya bahwa wadah induk memiliki gaya arah-fleksibel yang disetel ke "baris".

.induk {
 tampilan: fleksibel; 
 arah fleksibel: baris;
}

Anda dapat menerapkan properti align-self pada item individual. Item individual akan menggunakan gaya properti align-self, dan akan memusatkan item di seluruh wadah induk.

Lihat kode untuk properti align-self di this cuplikan CodePen untuk melihat beberapa contoh.

Cara Mendistribusikan Garis Melewati Sumbu Silang

Itu menyelaraskan-konten properti menyelaraskan anak-anak di sepanjang sumbu vertikal. Itu juga dapat menentukan jarak antar item yang ada di beberapa baris.

Opsi untuk properti align-content meliputi:

align-content: flex-start | ujung fleksibel | tengah | peregangan | ruang-antara | luar angkasa

Tambahkan properti align-content ke wadah induk fleksibel. Properti align-content hanya akan berfungsi jika properti flex-wrap disetel. Tambahkan flex-wrap: bungkus ke wadah induk, dan kurangi lebar div induk untuk memaksa item ke lebih dari satu baris.

.induk {
 bungkus fleksibel: bungkus;
 tampilan: fleksibel;
 align-content: flex-start;
 lebar: 180 piksel;
}

Lihat kode untuk properti align-content di this cuplikan CodePen untuk melihat beberapa contoh.

Cara Menyelaraskan Item pada Sumbu Utama

Itu membenarkan-konten properti menambahkan perataan kanan, kiri, atau tengah ke item anak. Itu juga menyebarkan item dengan menambahkan spasi di antara mereka saat membenarkan konten.

Opsi untuk properti justify-content meliputi:

justify-content: mulai fleksibel | ujung fleksibel | tengah | ruang-antara | luar angkasa | ruang-merata

Bungkus item yang ingin Anda ratakan di bawah wadah fleksibel induk.

HTML:

CSS:

.red { warna latar belakang: merah; }
.hijau { background-color: hijau muda; }
.blue { warna latar belakang: biru; }

Tambahkan properti justify-content ke wadah induk fleksibel.

.induk {
 lebar: 300 piksel;
 tampilan: fleksibel; 
 justify-content: mulai fleksibel;
}

Properti justify-content juga mendukung nilai yang tercantum dalam spesifikasi Perataan Kotak CSS. Ini termasuk nilai-nilai seperti "mulai", "akhir", "kiri", dan "kanan". Beberapa browser tidak mendukung ini.

Properti justify-content juga memiliki kata kunci "aman" yang dapat Anda gunakan. Ini memastikan bahwa elemen mencoba untuk tetap berada dalam kisaran wadah induk.

Ini juga digunakan untuk mencegah kehilangan data, jika Anda memusatkan kata yang panjang. Menggunakan kata kunci safe mencegah div yang lebih pendek dari memotong huruf pertama dan terakhir.

.induk {
 tampilan: fleksibel; 
 justify-content: pusat aman;
}

Kata kunci aman juga terbatas pada browser tertentu. Anda dapat memeriksa kompatibilitas di Bisakah saya menggunakan?.

Lihat kode untuk properti justify-content di this cuplikan CodePen untuk melihat beberapa contoh.

Bagaimana Menambahkan Spasi Antar Item

Itu celah properti memungkinkan Anda untuk menambahkan jumlah ruang antara item. Itu salah satunya fitur CSS baru yang dapat membantu Anda membangun tata letak yang responsif.

Terapkan properti gap ke wadah fleksibel induk.

.induk {
 tampilan: fleksibel;
 celah: 70 piksel;
}

Jika Anda menambahkan celah yang memaksa panjang item melebihi lebar induknya, item akan menyusut untuk mencoba dan muat di dalam baris.

.induk { 
 lebar: 300 piksel;
 celah: 120 piksel;
}

Jika Anda menggunakan flex-wrap: wrap untuk mendorong item ke baris baru, jumlah celah juga akan berlaku untuk ruang di antara baris.

.induk { 
 lebar: 300 piksel;
 bungkus fleksibel: bungkus;
 celah: 120 piksel;
}

Selain itu, Anda juga dapat mengatur celah baris dan kolom-celah properti. Sekali lagi, Anda harus menerapkan ini ke wadah fleksibel induk.

Properti celah baris menentukan ruang antara setiap baris. Properti kolom-celah menentukan ruang antara setiap kolom.

.induk { 
 celah baris: 120px; 
}
.induk { 
 celah kolom: 120px; 
}

Lihat kode untuk properti gap di this cuplikan CodePen untuk melihat beberapa contoh.

Menggunakan Lebih Banyak Properti Fleksibel di Situs Web Anda

Semoga, Anda sekarang terbiasa dengan berbagai properti fleksibel yang dapat Anda gunakan untuk menyelaraskan item di halaman web Anda. Ini termasuk bagaimana Anda dapat menggunakan properti flex-direction, justify-content, align-self, align-items, align-content, dan gap.

Flexbox adalah teknik tata letak yang kuat, tetapi itu hanya satu bagian kecil dari CSS. Anda juga dapat mempelajari tentang properti CSS baru, teknik pengkodean bersih, dan alat yang digunakan untuk pengoptimalan CSS.

11 Alat Berguna untuk Memeriksa, Membersihkan, dan Mengoptimalkan File CSS

Baca Selanjutnya

Tentang Penulis