Merhabalar.
Bu yazımda Items için flex-shrink özelliklerine bakacağız.
Projemiz bir önceki yazımızdan devam ettiği için öncelikle o yazımı okumanızı tavsiye ederim.
Bir önceki yazılarımda anlatılan flex özellikleri, kapsayıcıya aitti. Birde içindeki öğeler için esnek yapıda neler yapabiliyoruz, onlara bakalım.
Burada bahsedeceğimiz özelliklerin nasıl gözüktüğünü daha iyi anlayabilmek için öncelikle kodlarımızda şu güncellemeleri yapalım.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="flexbox.css">
</head>
<body>
<h1>Container 1</h1>
<div class="container1">
<div class="box box1" >Box 1</div>
<div class="box box2" >Box 2</div>
<div class="box box3" >Box 3</div>
<div class="box box4" >Box 4</div>
<div class="box box5" >Box 5</div>
</div>
<div class="divider"></div>
<h1>Container 2</h1>
<div class="container2">
<div class="box box1" >Box 1</div>
<div class="box box2" >Box 2</div>
<div class="box box3" >Box 3</div>
<div class="box box4" >Box 4</div>
<div class="box box5" >Box 5</div>
</div>
<script src="flexbox.js"></script>
</body>
</html>body{
margin: 0;
padding: 0;
font-family: sans-serif;
padding: 30px;
}
.box{
width: 400px;
height: 100px;
background-color: #ccc;
font-size: 20px;
text-align: center;
line-height: 100px;
border-radius: 20px;
margin-bottom: 5px;
}
.divider{
height: 40px;
}
.container1{
width: 1000px;
padding: 10px;
height: 700px;
background-color: #21b5da;
display: flex;
flex-flow: row nowrap;
}
.container2{
background-color: #9bdff1;
padding: 10px;
height: 950px;
display: flex;
flex-flow: column wrap;
}
.box1{
}
.box2{
}
.box3{
}
.box4{
}
.box5{
}
Şu anki güncellemelerimiz sonrası uygulama aşağıdaki gibi gözüküyor.
flex-shrink özelliği, bir flex container’ın boyutunun container’ın boyutundan küçük olduğu durumlarda flex öğelerinin nasıl küçüleceğini belirler. flex-shrink özelliğinin değeri, öğenin “küçülme faktörü”nü belirler. Yani, bir flex öğesinin flex-shrink değeri ne kadar yüksekse, o öğe diğer öğelere göre o kadar çok küçülür.
Ancak, flex-shrink özelliği sadece flex container’ın boyutu, içindeki flex öğelerinin toplam boyutundan küçük olduğunda etkili olur. Eğer flex container’ın boyutu, içindeki flex öğelerinin toplam boyutundan büyükse veya eşitse, flex-shrink özelliği hiçbir etki yapmaz.
Eğer flex-shrink özelliğinin bir etkisi olmasını istiyorsanız, flex container’ın boyutunu, içindeki flex öğelerinin toplam boyutundan küçük bir boyuta ayarlamayı deneyin. Bu durumda, flex-shrink özelliği, flex öğelerinin nasıl küçüleceğini belirler.
.item {
flex-shrink: 2; /* Öğenin küçülme faktörü */}Bu örnekte, flex-shrink özelliği, 2 değeri ile ayarlanmıştır. Bu, öğenin diğer flex öğeleriyle orantılı olarak daha fazla küçülmesini sağlar. flex-shrink değeri, öğenin ne kadar küçüleceğini belirleyen bir faktördür.
flex-shrink özelliğinin alabileceği değerler şunlardır:
0: Öğe küçülmeyecek.
1: Diğer flex öğeleriyle orantılı olarak küçülecek.
2: Diğer flex öğelerinden iki kat daha fazla küçülecek.
n: Belirli bir sayıda küçülme faktörü belirtir.
Bu özellik, genellikle container içindeki öğelerin küçüleceği durumları kontrol etmek için kullanılır. Eğer bir öğenin diğerlerinden daha fazla küçülmesini istiyorsanız, flex-shrink özelliğini kullanarak bu davranışı ayarlayabilirsiniz.
.box1{
flex-shrink: 2;
}
.box2{
flex-shrink: 4;
}
.box3{
flex-shrink: 4;
}
.box4{
flex-shrink: 5;
}
.box5{
flex-shrink: 6;
}Görüşmek üzere.
Hüzünlü bir selam. Bu yazı dizisine başlarken büyük umutlarım vardı. Oly’nin FIP durumunu erken teşhis…
Selamlar, bu yazımda sizlere Oly’nin çıkan PCR sonucu ve geçtiğimiz bir haftada hastalığın genel seyrinden…
Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…
Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…
Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…
Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…