Parçalanmış krep

Bu düzen örneğin, pazarlama siteleri için yaygın olarak kullanılan bir düzendir. Bu düzende, genellikle bir ürünün bazı özelliklerini açıklayan bir resim, başlık ve ardından metin içeren üç öğeden oluşan bir satır bulunabilir. Daha küçük ekranlarda, bu ekranların güzelce üst üste yerleştirilmesini ve ekran boyutunu büyüttükçe genişletilmesini istersiniz.

Bu efekt için flexbox'ı kullandığınızda, ekran yeniden boyutlandırıldığında bu öğelerin yerleşimini ayarlamak için medya sorgularına ihtiyacınız olmaz.

flex: flex: <flex-grow> <flex-shrink> <flex-basis> anlamına gelir.

flex-grow Esneme

Kutuların sonraki satıra geçerken uzatılıp alanı doldurmasını istiyorsanız <flex-grow> değerini 1 olarak ayarlayın. Örneğin:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

Şimdi ekran boyutunu artırdıkça veya azalttıkça bu esnek öğeler hem küçülür hem de büyür.

Esneme yok

Kutularınızın <flex-basis> boyutlarına göre doldurulmasını, daha küçük boyutlarda küçültülmesini ancak fazla alanı dolduracak şekilde genişletilmemesini istiyorsanız şunu yazın: flex: 0 1 <flex-basis>. Bu durumda, <flex-basis> öğeniz 150 pikseldir:

.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;
}