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

Cara Penggunaan Flex-wrap Pada CSS

Kemudian kita buka pada ukuran mobile

Cara Penggunaan Flex-wrap Pada CSS

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

Cara Penggunaan Flex-wrap Pada CSS

Jika sudah save dan jalankan pada browsernya

Cara Penggunaan Flex-wrap Pada CSS

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.

Cara Penggunaan Flex-wrap Pada CSS

Maka hasilnya seperti gambar di bawah ini

Cara Penggunaan Flex-wrap Pada CSS

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.

Hernowo Author

Leave a Reply

Your email address will not be published. Required fields are marked *