Kursus IT Dasar CSS 032_Tata letak fleksibel Flex

Tata letak fleksibel Flex

Untuk waktu yang lama, satu-satunya alat yang dapat diandalkan dan kompatibel lintas browser untuk membuat tata letak CSS hanyalah float dan position. Kedua alat ini bekerja dengan baik dalam sebagian besar kasus, tetapi dalam beberapa aspek mereka memiliki keterbatasan tertentu yang mempersulit penyelesaian tugas.

Persyaratan tata letak sederhana berikut ini sulit atau tidak mungkin diterapkan secara nyaman dan fleksibel dengan alat-alat seperti itu (float dan position):

• Memusatkan blok konten secara vertikal di dalam konten induk.
• Membuat semua elemen anak dari sebuah kontainer menempati jumlah lebar/tinggi yang tersedia secara merata, terlepas dari berapa banyak lebar/tinggi yang tersedia.
• Membuat semua kolom dalam tata letak multi-kolom mengadopsi tinggi yang sama, bahkan jika mereka berisi jumlah konten yang berbeda.

Tata letak Flex CSS adalah alat tata letak yang kuat dalam CSS yang dapat digunakan untuk membuat berbagai tata letak fleksibel. Untuk menguasai tata letak Flex CSS, perlu menguasai pengetahuan berikut:

• Kontainer flex (flex container): Tata letak Flex terdiri dari kontainer flex dan item flex. Kontainer flex adalah kontainer yang menempatkan item flex ke dalam tata letak Flex. Kontainer flex dapat berupa elemen apa pun, tetapi biasanya menggunakan elemen div.
• Item flex (flex item): Item flex adalah elemen yang ditempatkan dalam kontainer flex. Item flex dapat berupa elemen apa pun, tetapi biasanya menggunakan elemen div.
• Sumbu utama (main axis): Sumbu utama adalah arah horizontal atau vertikal dari elemen dalam tata letak Flex.
• Sumbu silang (cross axis): Sumbu silang adalah arah vertikal atau horizontal dari elemen dalam tata letak Flex.

Properti kontainer flex

Kontainer flex memiliki properti berikut untuk mengontrol tata letak Flex:

• display: Mengatur mode tampilan kontainer flex. Kontainer flex harus diatur ke display: flex atau display: inline-flex untuk menggunakan tata letak Flex.
• flex-direction: Mengatur arah sumbu utama tata letak Flex. Nilai dapat berupa: flex-start perataan awal sumbu utama, flex-end perataan akhir sumbu utama, row sumbu utama disusun horizontal, row-reverse sumbu utama disusun horizontal terbalik, column sumbu utama disusun vertikal, column-reverse sumbu utama disusun vertikal terbalik.
• flex-wrap: Mengontrol apakah item di dalam kontainer flex dibungkus. nowrap nilai default, tidak dibungkus, wrap dibungkus, wrap-reverse pembungkusan terbalik.
• flex-flow: Singkatan dari flex-direction dan flex-wrap, dua nilai yang masing-masing sesuai dengan flex-direction dan flex-wrap.
• justify-content: Mengatur perataan item flex pada sumbu utama dalam kontainer flex. Nilai dapat berupa: flex-start perataan awal sumbu utama, flex-end perataan akhir sumbu utama, center perataan tengah sumbu utama, space-between perataan rata sumbu utama (kontainer sejajar awal dan akhir), space-around perataan rata sumbu utama (jarak yang sama antar item) atau space-evenly perataan rata sumbu utama (termasuk jarak yang sama di kedua sisi).
• align-items: Mengatur perataan item flex pada sumbu silang dalam kontainer flex. Nilai dapat berupa: flex-start perataan awal sumbu silang, flex-end perataan akhir sumbu silang, center perataan tengah sumbu silang, stretch nilai default atau baseline perataan garis dasar teks baris pertama sumbu silang. Hanya berlaku untuk item anak dari kontainer flex.
• align-content: Seperti align-items, ini adalah properti untuk mengontrol perataan item anak pada sumbu silang, yang hanya berlaku ketika kontainer flex memiliki beberapa sumbu (beberapa baris atau kolom).

Properti item flex

Item flex memiliki properti berikut untuk mengontrol tata letak item flex dalam tata letak Flex:

• flex-grow: Mengatur rasio ekspansi item flex pada sumbu utama. Nilai dapat berupa angka floating-point antara 0 dan 1.
• flex-shrink: Mengatur rasio penyusutan item flex pada sumbu utama. Nilai dapat berupa angka floating-point antara 0 dan 1.
• flex-basis: Mengatur lebar atau tinggi default item flex pada sumbu utama. Nilai dapat berupa nilai panjang, nilai persentase atau auto.
• order: Mengatur urutan item flex pada sumbu utama. Nilai dapat berupa bilangan bulat antara 1 dan 65535.

Contoh:

1
/* Gaya kontainer flex */
2
.flex-container {
3
    display: flex;
4
    flex-direction: row; /* Arah sumbu utama horizontal */
5
    justify-content: space-around; /* Perataan pada sumbu utama */
6
    align-items: center; /* Perataan pada sumbu silang */
7
    height: 200px; /* Mengatur tinggi kontainer */
8
    border: 2px solid #333; /* Menambahkan border untuk visualisasi yang lebih baik */
9
}
10
/* Gaya item flex */
11
.flex-item {
12
    flex: 1; /* Membagi ruang sumbu utama secara merata */
13
    text-align: center;
14
    padding: 20px;
15
    background-color: #f2f2f2;
16
}

1
<!-- Kontainer flex -->
2
<div class="flex-container">
3
    <!-- Item flex 1 -->
4
    <div class="flex-item">Item 1</div>
5
    <!-- Item flex 2 -->
6
    <div class="flex-item">Item 2</div>
7
    <!-- Item flex 3 -->
8
    <div class="flex-item">Item 3</div>
9
</div>

Efek: