Bootstrap 5 TutorialLesson 33Preview gratis
BS5 Flex
Lesson ini bagian dari Bootstrap · Semua level
Ringkasan
Utilitas flex Bootstrap memudahkan pengaturan flexbox tanpa menulis CSS manual, seperti .d-flex untuk mengaktifkan flex container dan .justify-content-center untuk memusatkan isi. Kontrol arah memakai .flex-row dan .flex-column, sedangkan .flex-wrap mengizinkan item pindah baris. Margin otomatis seperti .me-auto berguna untuk memisahkan elemen dalam flex.
Poin kunci
- .d-flex mengaktifkan tata letak flexbox pada elemen.
- .justify-content-* mengatur perataan utama: start, center, end, between.
- .align-items-* mengatur perataan silang: start, center, end, stretch.
- .flex-row dan .flex-column mengatur arah; .flex-wrap mengizinkan pindah baris.
- .flex-grow-1 dan .flex-shrink-0 mengatur peregangan item.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.