Cara Penggunaan Flex-wrap Pada CSS

Halo selamat datang kembali di website tips dan trik Dumet School, berjumpa kembali dengan saya pada pembahasan tips dan trik seputar dunia website. Kali ini kita akan melanjutkan pembahasan tentang flexbox css, dimana pada artikel lain kita sudah membahas flex-grow, flex-shrink dan juga flex-basis. Dan di artikel kali ini kita akan belajar Cara Penggunaan Flex-wrap Pada CSS setelah kita memberikan flex pada container maka di dalamnya kita bisa memberikan flex-grow, flex-shrink dan juga flex-basis jika kita singkat menjadi flex:1 1 200px;

Baik kita buat terlebih dahulu struktur htmlnya dan cssnya, teman – teman bisa ketikkan seperti script di bawah ini

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="row">
  <div class="col one"></div>
  <div class="col two"></div>
  <div class="col three"></div>
</div>

</body>
</html>

Dan css nya di bawah ini

.row {
    display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    display: flex;
    background-color: gray;
}
.col{flex:1 1 200px; height: 100px}
.one{background-color: tomato}
.two{background-color: orange}
.three{background-color: red}

Jika sudah save dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini

Kemudian kita buka pada ukuran mobile

Maka yang akan terjadi adalah kolom kita tidak akan responsive, maka dari itu kita butuh yang namanya flex-wrap yang artinya menentukan apakah konten yang fleksibel dibungkus atau tidak. Jika tidak kita berikan maka yang terjadi seperti pada gambar di atas ini. Perhatikan terdapat scroll di bawahnya, lalu kolom kita juga menjadi terpotong. Lalu kita berikan flex-wrap pada class row

Jika sudah save dan jalankan pada browsernya

Hasilnya seperti gambar di atas ini, jadi pada saat kolom tidak mencukupi ukuran 200px maka kolom akan otomatis di turun di bawahnya sesuai urutan div nya, secara default flex-wrap memiliki nilai nowrap lalu kita bisa berikan wrap seperti yang di kita lakukan pada latihan kali ini. Kemudian ada yang namanya wrap-reverse untuk membalik urutannya, yang tadinya urutan teraktir maka dengan wrap-reverse urutan terakhir menjadi yang paling pertama.

Maka hasilnya seperti gambar di bawah ini

Nah itulah tips tentang Cara Penggunaan Flex-wrap Pada CSS yang dapat kita gunakan untuk melengkapi dalam pembuatan website responsive dengan css. Kita akan jumpa kembali pada artikel yang akan datang, terimakasih dan sampai jumpa.