Bu, pazarlama siteleri için yaygın bir düzendir. Örneğin, genellikle bir resim, başlık ve ardından bir ürünün bazı özelliklerini açıklayan metin içeren üç öğe satırı bulunabilir. Küçük ekranlarda bu öğelerin güzelce yığılmasını, ekran boyutunu artırdıkça da genişlemesini istersiniz.
Bu efekt için esnek kutuyu kullandığınızda, ekran boyutu değiştiğinde bu öğelerin yerleşimini ayarlamak için medya sorgularına ihtiyacınız olmaz.
flex kısaltması flex: <flex-grow> <flex-shrink> <flex-basis>
anlamına gelir.
flex-grow
Esneme
Kutuların bir sonraki satıra sarmalanırken esnemesini ve alanı doldurmasını istiyorsanız <flex-grow>
değerini 1 olarak ayarlayın. Örneğin:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Artık ekran boyutunu artırdığınızda veya azalttığınızda bu esnek öğeler hem küçülür hem de büyür.
Uzatma yok
Kutularınızın <flex-basis>
boyutuna kadar doldurulmasını, daha küçük boyutlarda küçülmesini ancak ek alanı doldurmak için uzatılmamasını istiyorsanız flex: 0 1 <flex-basis>
yazın. 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;
}