CSS Flexbox: flex-wrap Nedir?

eminbasbayan

3 dk okuma

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

Web geliştirmeye yeni başlayanlar için Flexbox, öğeleri düzenlemek ve hizalamak için oldukça kullanışlıdır. flex-wrap özelliği, öğelerin ana eksen boyunca tek bir satırda mı yoksa birden fazla satır veya sütunda mı yer alacağını belirler. Bu yazıda, flex-wrap kullanımı ve seçeneklerini detaylıca ele alacağız.

flex-wrap Nedir?

Flexbox kullanırken içeriklerin kapsayıcıya sığmaması durumunda nasıl davranacağını belirlemek için flex-wrap özelliğini kullanırız. Varsayılan olarak, içerikler tek bir satırda/sütunda sıkıştırılarak gösterilir. Ancak flex-wrap ile öğeleri birden fazla satır veya sütuna bölmek mümkündür.

flex-wrap için kullanılabilecek değerler şunlardır:

nowrap (varsayılan)
wrap
wrap-reverse

TEXT?

1. Varsayılan: nowrap

.container {
    display: flex;
    flex-wrap: nowrap; /* Varsayılan değer, tüm öğeleri tek satırda tutar */
}

Bu durumda, öğeler tek bir satırda/sütunda sıkışır ve kapsayıcıya sığacak şekilde küçültülür. Eğer öğelerin boyutu büyükse, daralır ve içeriği bozabilir.

2. Öğelerin Yeni Satıra Geçmesi: wrap

.container {
    display: flex;
    flex-wrap: wrap;
}

Bu durumda, öğeler kapsayıcıya sığmazsa bir alt satıra veya yeni bir sütuna geçer. Eğer flex-direction: row ise satır satır, flex-direction: column ise sütun sütun devam eder.

3. Ters Yönde Sarma: wrap-reverse

.container {
    display: flex;
    flex-wrap: wrap-reverse;
}

Bu özellik, öğeleri wrap ile aynı mantıkta sarar ancak ters yönde sıralar. row kullanıyorsak aşağıdan yukarıya, column kullanıyorsak sağdan sola sıralama yapar.

Örnek Uygulama

Aşağıdaki HTML yapısında beş adet div bulunuyor ve biz bunları flex-wrap ile farklı şekillerde hizalayacağız:

<div class="container">
    <div class="box" style="background-color: green;">1</div>
    <div class="box" style="background-color: blue;">2</div>
    <div class="box" style="background-color: red;">3</div>
    <div class="box" style="background-color: yellow;">4</div>
    <div class="box" style="background-color: purple;">5</div>
</div>

Şimdi bu öğeleri flexbox ile farklı şekillerde hizalayalım:

.container {
    display: flex;
    flex-wrap: wrap;
    width: 500px;
    margin: auto;
    border: 2px solid black;
}

.box {
    width: 200px;
    height: 100px;
    text-align: center;
    font-size: 20px;
    color: white;
}

Bu kodları çalıştırdığımızda, öğeler belirlenen genişliğe sığmazsa otomatik olarak alt satıra geçecektir. Eğer flex-wrap: wrap-reverse; kullanırsak, bu yeni satırlar yukarıya doğru dizilecektir.

flex-wrap ve flex-direction İlişkisi

flex-wrap, flex-direction ile birlikte kullanıldığında ana eksene bağlı olarak sarma işlemi gerçekleştirir. Örneğin:

.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

Bu durumda, öğeler dikey olarak sıralanacak ve eğer kapsayıcıya sığmazsa yeni bir sütun oluşturacaktır.

Sonuç

flex-wrap özelliği, öğelerin kapsayıcı içinde nasıl sarılacağını belirleyen temel bir Flexbox özelliğidir. nowrap, wrap ve wrap-reverse değerleri ile öğeleri sıkıştırabilir, yeni satıra/sütuna taşıyabilir veya ters yönde sıralayabiliriz.

Öğelerin nasıl hizalanacağını belirlemek için, önce flex-direction ile ana eksenin yönünü belirleyip, ardından flex-wrap ile öğelerin nasıl davranacağını düzenleyebiliriz.

Flexbox ile ilgili kafanıza takılan bir şey varsa, yorumlarda paylaşabilirsiniz!