5.00 / 1 oy

CSS Flexbox flex-shrink Özelliği Nedir ve Nasıl Kullanılır?

Önceki yazı için bkz: CSS Flexbox flex-grow Özelliği Nedir ve Nasıl Kullanılır?

Flexbox özelliklerinden flex-shrink, flex-grow özelliğinin tam tersi mantığı ile çalışır ve ilgili alanın hangi katsayı ile küçültüleceğini belirlemenizi sağlar. Önceki örnekteki alanları yeniden boyutlandırarak 3. alanın boyut olarak 3 kat küçülmesini sağlamak için aşağıdaki gibi css kodlarımızı düzenleyebiliriz:

flexbox flex-shrink

Önceki örnekten farklı olarak bu örnekte kapsayıcı (container) div için bir uzunluk sınırı belirlediğimi atlamayın, yoksa flex-shrink özelliği çalışmayacaktır.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Flexbox Direction Reitix</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <meta http-equiv="refresh" content="2" >

    <style>
        .ust{background-color: indigo; display: flex; flex-direction: row; flex-wrap: nowrap; width: 300px;
            justify-content: center; align-items: flex-start; }
        .alt{background-color: hotpink; margin: 10px;padding: 10px;color: white; width: 100px;}
        .alt:nth-child(3) {flex-shrink: 3;}
    </style>
</head>
<body>
    <div class="ust">
        <div class="alt">1</div>
        <div class="alt">2</div>
        <div class="alt">3</div>
    </div>

</body>
</html>

 

BasParmak

28.06.2020 12:55

Bu soru henüz yanıtlanmamış.

Bu soruya sadece kayıtlı kullanıcılar yanıt yazabilirler. Yanıt yazmak için lütfen giriş yapınız.

Reitix
CSS Flexbox flex-shrink Özelliği Nedir ve Nasıl Kullanılır?

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.