Fungsi Property CSS Display Flex

Hallo teman-teman DUMET School, pada tutorial kali ini saya akan menjelaskan fungsi dari property CSS Display Flex. Pada tutorial sebelumnya saya juga sudah menjelaskan tentang Fungsi Property CSS Display inline dan block. Display flex di dalam CSS berfungsi untuk membuat elemen-elemen yang ada di dalamnya menjadi sejajar kesamping dengan rapih atau sesuai dengan keinginan yang kalian mau. Sifat dari display flex ini hampir sama dengan display inline-block yaitu membuat elemen menjadi sejajar kesamping. Nah satu yang perlu kalian ketahui display flex ini tidak akan berjalan di browser lama display flex ini hanya akan berjalan di versi browser terbaru sekarang-sekarang ini. Baik supaya teman-teman lebih paham lagi maksud dari fungsi property CSS Display Flex ini kita akan langsung praktekkan saja ya teman-teman.

Pertama teman-teman bisa buat satu file dengan nama index.html, dan buat struktur HTML nya seperti gambar di bawah ini.

Selanjutnya Untuk CSS nya kalian bisa tuliskan baris program di bawah ini.

Kalian bisa lihat pada CSS yang ada di gambar tersebut, untuk membuat elemen-elemen yang memeiliki class .content menjadi sejajar ke samping kalian bisa menambahkan property CSS display: flex di pembungkus luarnya yaitu di .main-container bukan di .content nya. Dan perhatikan juga satu property CSS lagi yang berfungsi untuk mengatur elemen-elemen yang ada di dalamnya menjadi rapih yaitu justify-content, property CSS tersebut kalian letakan di pembungkusnya juga yaitu di .main-container ya teman-teman, jadi property CSS justify-content berfungsi untuk membuat kotak-kotak yang ada di dalam pembungkus .main-container menjadi rapih jadi kalian tidak perlu lagi mengatur jarak margin dan padding dari elemen-elemen tersebut, nah untuk nilai dari property CSS justify-content ini, kalian bisa menentukan nilainya dengan nilai flex-start (membuat elemen menjadi rata kiri), flex-end (membuat elemen menjadi rata kanan), center (membuat elemen menjadi rata tengah), space-around (membuat jarak margin kiri dan kanan yang sama antar elemen), dan space-between (membuat elemen yang berada di kiri menjadi sejajar kekiri, dan elemen yang berada di kanan menjadi sejajar ke kanan).

Maka nanti hasilnya akan seperti ini.

Sangat mudah ya teman-teman, jadi jika kalian ingin membuat website 2 kolom, atau 3 kolom kalian bisa juga gunakan property CSS display flex ini. Sekian dulu tutorial dari saya sampai ketemu di tutorial berikutnya ya. Terima Kasih.

4 Oktober 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat