Blog Request tutorial? klik disini!

  • Membuat Kolom Dengan Flex

    Ditulis oleh: Aulia Rahmah Alhafidz
    610 kali dibaca
    24 Nov / 2014 08:44

    Banyak cara yang bisa digunakan untuk membagi suatu div ke dalam beberapa kolom. Seperti menggunakan overflow dan float. Namun, sebenarnya ada alternatif untuk membuat kolom. Sehingga memudahkan kita dalam mengatur tata letak website.

    Inilah Properties CSS "Flex". Ada yang sudah mencobanya? Jika belum, coba untuk mengikuti script di bawah ini.

    Kita akan mencoba membuat 3 kolom. Buat strukturnya seperti berikut

    <div id="content">
    
    <div class="kolom" style="background-color:#e74c3c">Ini kolom pertama</div>
    
    <div class="kolom" style="background-color:#e67e22">Ini kolom kedua dengan isi : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at odio nec magna tempus scelerisque. Praesent tristique dolor eu pellentesque pharetra.</div>
    
    <div class="kolom" style="background-color:#f1c40f">Ini kolom ketiga</div>
    
    </div>

    Dan sekarang, kita akan menggunakan fungsi flex yang ada di dalam properties CSS.

    #content {  
        width: 400px;  
        height: 300px;  
        display: flex;  
    }  
    #content .kolom {  
        flex: auto;  
    } 

    Dan hasilnya akan menjadi seperti berikut :

    Membuat-Kolom-dengan-Flex

    Semoga bermanfaat ya :)






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155