CSS Float vs Display Flex

Float vs Flex

Float merupakan sebuah properti CSS yang digunakan untuk membuat suatu elemen HTML mengambang.

float: value
Karena elemen mengambang sehingga dapat "ditarik" ke kiri atau ke kanan, maka value pada properti float bisa berisi : left, right dan none untuk membatalkan floating.

Sedangkan Flex adalah salah satu value dari properti CSS display yang berfungsi untuk membuat kelompok elemen menjadi fleksibel / mudah ditata.

display: flex;

Sebagai bahan pembanding fungsi dari float dan flex kita gunakan elemen berikut ini

<style>
ul {
  background: #f1f1f1; 
  list-style: none; 
  padding-inline-start:0
  }
li {
  padding:4px 12px; 
  border: 1px solid mediumblue;
  color: mediumblue;
  }
</style>
<ul>
  <li>Konten 1</li>
  <li>Konten 2</li>
  <li>Konten 3</li>
  <li>Konten 4</li>
</ul>

• Konten 1
• Konten 2
• Konten 3
• Konten 4
• Konten 5
• Konten 6
• Konten 7
• Konten 8
• Konten 9
• Konten 0

Elemen List ul-li

Elemen float

Untuk menghasilkan elemen float tambahkan CSS dibawah ini :

ul {/*--css elemen--*/}
li {
  float: left;
  display: inline-block;
  }

Target float tidak pada pada elemen parent (induknya)-nya yaitu <ul> melainkan langsung ke elemen child (turunan)-nya yaitu <li>

Sehingga tampilan elemen yang aslinya tampak seperti pada elemen ul-li diatas maka akan dihasilkan tampilan seperti berikut:

• Konten 1
• Konten 2
• Konten 3
• Konten 4
• Konten 5
• Konten 6
• Konten 7
• Konten 8
• Konten 9
• Konten 0

Elemen List ul-li dengan float

Elemen flex

Pada elemen flex untuk menghasilkan tampilan yang sama dengan diatas, harus melalui elemen parent / elemen induknya yaitu <ul>

ul {display: flex;}
li {/*--css elemen--*/}

Hasil:

• Konten 1
• Konten 2
• Konten 3
• Konten 4
• Konten 5
• Konten 6
• Konten 7
• Konten 8
• Konten 9
• Konten 0

Elemen List ul-li dengan flex

Tampilan elemen flex bersifat fleksibel sehingga dapat memenuhi ruang atau barisnya (nowrap) oleh karena itu akan nampak berdesakan dalam satu baris seperti diatas. Sifat fleksibel ini menjadikan elemen flex memiliki lebih banyak pengaturan dibandingkan elemen float.

Untuk mengatur susunan elemen seperti diatas agar dapat mempertahankan dimensi elemen dan membuat baris baru terdapat pengaturan berikut :
flex-wrap: wrap;

ul {
  display: flex;
  flex-wrap: wrap;
  }
li {/*--css elemen--*/}

Hasil:

• Konten 1
• Konten 2
• Konten 3
• Konten 4
• Konten 5
• Konten 6
• Konten 7
• Konten 8
• Konten 9
• Konten 0

Elemen List ul-li dengan flex

Flex - gap

gap berfungsi untuk mengatur jarak antar elemen sehingga elemen tidak bersentuhan satu sama lain.

Pada elemen float, untuk mengatur jarak antar elemen dapat menggunakan margin
Sedangkan pada elemen flex menggunakan gap.

ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  }
li {/*--css elemen--*/}

Hasil:

• Konten 1
• Konten 2
• Konten 3
• Konten 4
• Konten 5
• Konten 6
• Konten 7
• Konten 8
• Konten 9
• Konten 0

Elemen flex dengan gap

Flex - Justify-content

justify-content berfungsi untuk menentukan perataan elemen flex.

Jenis perataan pada elemen flex :

start / flex-start / left	Elemen rata kiri / rata awal
end / flex-end / right	Elemen rata kanan / rata akhir
center	Elemen rata tengah
space-between	Perataan elemen berdasarkan jarak sisi samping dengan fokus tengah antar elemen
space-around	Perataan elemen berdasarkan jarak keliling antar elemen
space-evenly	Perataan elemen berdasarkan sisa ruang antar elemen

ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: start;
  }
li {/*--css elemen--*/}

Klik tombol dibawah ini untuk melihat demo lengkap elemen flex dengan justify-content:

Lihat Demo

⇐ Sebelumnya

Selanjutnya ⇒