Ini adalah tata letak umum untuk situs pemasaran, misalnya, yang mungkin memiliki baris tiga item, biasanya dengan gambar, judul, lalu beberapa teks, yang menjelaskan beberapa fitur produk. Pada layar yang lebih kecil, Anda ingin item tersebut ditumpuk dengan baik, dan diperluas saat Anda meningkatkan ukuran layar.
Dengan menggunakan flexbox untuk efek ini, Anda tidak memerlukan kueri media untuk menyesuaikan penempatan elemen ini saat ukuran layar diubah.
Singkatan flex adalah singkatan dari: flex: <flex-grow> <flex-shrink> <flex-basis>
.
flex-grow
Peregangan
Jika Anda ingin kotak meluas dan mengisi ruang saat digabungkan ke baris berikutnya, tetapkan nilai <flex-grow>
ke 1, misalnya:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Sekarang, saat Anda menambah atau mengurangi ukuran layar, item fleksibel ini akan menyusut dan membesar.
Tanpa peregangan
Jika Anda ingin kotak diisi hingga ukuran <flex-basis>
, mengecil pada ukuran yang lebih kecil, tetapi tidak meluas untuk mengisi ruang tambahan, tulis: flex: 0 1 <flex-basis>
. Dalam hal ini, <flex-basis>
Anda adalah 150 piksel:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
HTML
<div class="parent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
CSS
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
/* Stretching: */
flex: 1 1 150px;
margin: 5px;
background: red;
gap: 1rem;
}