CSS Fleksibel Responsif
Flexbox Responsif
Anda telah mempelajari dari bab Kueri Media CSS bahwa Anda dapat menggunakan kueri media untuk membuat tata letak yang berbeda untuk ukuran layar dan perangkat yang berbeda.
Laptop dan Desktop:
Ponsel dan :
Misalnya, jika Anda ingin membuat tata letak dua kolom untuk sebagian besar ukuran layar, dan tata letak satu kolom untuk ukuran layar kecil (seperti ponsel dan tablet), Anda dapat mengubah flex-directiondari rowke column
pada titik henti sementara tertentu (800px di contoh di bawah):
Contoh
.flex-container {
display: flex;
flex-direction: row;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
Cara lain adalah dengan mengubah persentase flexproperti item fleksibel untuk membuat tata letak yang berbeda untuk ukuran layar yang berbeda. Perhatikan bahwa kita juga harus menyertakan flex-wrap: wrap;wadah fleksibel agar contoh ini berfungsi:
Contoh
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
}
}
Galeri Gambar Responsif menggunakan Flexbox
Gunakan flexbox untuk membuat galeri gambar responsif yang bervariasi antara empat, dua, atau gambar berukuran penuh, bergantung pada ukuran layar:
Situs Web Responsif menggunakan Flexbox
Gunakan flexbox untuk membuat situs web responsif, yang berisi bilah navigasi fleksibel dan konten fleksibel: