CSS Flex

  1. › 
  2. ›  ›  › 
  3. CSS Flex

Properti CSS flex

Di halaman ini

  1. CSS flex

Pengertian flex

flex berasal dari kata flexible (lentur / fleksibel).

Fungsi properti flex

Properti flex berfungsi untuk mengatur fleksibilitas kelompok elemen (group).

Membuat elemen grup : 
<div class='induk'>
  <div class='item konten-1'>konten 1</div>
  <div class='item konten-2'>konten 2</div>
  <div class='item konten-3'>konten 3</div>
  <div class='item konten-4'>konten 4</div>
  <div class='item konten-5'>konten 5</div>
  <div class='item konten-6'>konten 6</div>
</div>
<style>
.induk { background: #f1f1f1; }
.konten-1 { background: pink; border: 1px solid red;}
.konten-2 { background: greenyellow; border: 1px solid green;}
.konten-3 { background: yellow; border: 1px solid orange;}
.konten-4 { background: lightblue; border: 1px solid blue;}
.konten-5 { background: violet; border: 1px solid indigo;}
.konten-6 { background: coral; border: 1px solid chocolate;}
</style>

Tampilan normal - SEBELUM flex

konten 1
konten 2
konten 3
konten 4
konten 5
konten 6

Menerapkan properti flex

(Contoh dibawah ini menggunakan 4 konten) 
<style>
.induk { display: flex;}
.item { padding: 5px;}
</style>

Tampilan kustom - SESUDAH flex

konten 1
konten 2
konten 3
konten 4
Membuat celah antar elemen flex (gap)

Membuat celah (gap) pada properti flex berarti sama dengan mengatur jarak antar elemen.

(Contoh dibawah ini menggunakan 4 konten) 
<style>
.induk { display: flex; gap: 5px}
.item { padding: 5px;}
</style>

Tampilan kustom - gap

konten 1
konten 2
konten 3
konten 4
Penyebaran elemen flex (justify-content)
(Contoh dibawah ini menggunakan 4 konten) 
<style>
.induk { 
    display: flex;
    gap: 5px;
    justify-content: space-between;
    }
.item { padding: 5px;}
</style>

Tampilan kustom - justify-content

konten 1
konten 2
konten 3
konten 4
Memutuskan baris elemen flex (nowrap)
(Contoh dibawah ini menggunakan 6 konten) 
<style>
.induk { 
    display: flex;
    gap: 5px;
    justify-content: space-between;
    flex-wrap: nowrap;
    }
.item { padding: 5px;}
</style>

Tampilan kustom - nowrap

konten 1
konten 2
konten 3
konten 4
konten 5
konten 6
Mempertahankan baris elemen flex (wrap)
(Contoh dibawah ini menggunakan 6 konten) 
<style>
.induk { 
    display: flex;
    gap: 5px;
    justify-content: space-between;
    flex-wrap: wrap;
    }
.item { padding: 5px;}
</style>

Tampilan kustom - wrap

konten 1
konten 2
konten 3
konten 4
konten 5
konten 6
Membalik arah urutan elemen flex (flex-direction)
(Contoh dibawah ini menggunakan 6 konten) 
<style>
.induk { 
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    justify-content: space-between;
    flex-direction: row-reverse;
    }
.item { padding: 5px;}
</style>

Tampilan kustom - flex-direction

konten 1
konten 2
konten 3
konten 4
konten 5
konten 6

Komentar

Posting Komentar