Panekuk yang didekonstruksi

Ini adalah tata letak umum untuk situs pemasaran, misalnya, yang mungkin memiliki baris yang terdiri dari tiga item, biasanya dengan gambar, judul, lalu beberapa teks, yang menjelaskan beberapa fitur produk. Pada layar yang lebih kecil, Anda pasti ingin mereka menumpuk dengan baik, dan meluas saat Anda memperbesar ukuran layar.

Dengan menggunakan flexbox untuk efek ini, Anda tidak memerlukan kueri media untuk menyesuaikan penempatan elemen tersebut saat ukuran layar berubah.

Singkatan flex adalah singkatan dari: flex: <flex-grow> <flex-shrink> <flex-basis>.

Peregangan flex-grow

Jika Anda ingin kotak meregang 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 memperbesar atau memperkecil ukuran layar, item fleksibel ini akan mengecil dan bertambah.

Tidak ada peregangan

Jika Anda ingin kotak Anda terisi sesuai ukuran <flex-basis>, perkecil pada ukuran yang lebih kecil, tetapi tidak membentangkan 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;
}

<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

        .parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  /*  Stretching: */
  flex: 1 1 150px; 
  margin: 5px;
  background: red;
  gap: 1rem;
}