CSS Flex Kullanımı

CSS flex kullanımı gün geçtikçe artmaktadır.Peki flex nedir bundan bahsedelim.Web projelerinde cssde kullanılan bize esneklik sağlayan bir özelliktir.Flex ile beraber daha kolay yatay ve dikeyde hizalama yapabiliriz.

Örnek olarak bir tane container adlı sınıfın içinde 3 tane div etiketimiz olsun.

<div class="container">
     <div class="item item-1"></div>
     <div class="item item-2"></div>
     <div class="item item-3"></div>
</div>

Container içindeki etiketlere belirli bir yükseklik ve genişlik değeri verelim.Belli olması için arkaplan rengi kullanabiliriz.

.item{
    width: 400px;
    height: 400px;
    background: #ffeb3b;
    margin: 20px;
}

Css Flex Nasıl Kullanılır ?

CSS’de flex özelliğini kullanmak için dıştaki kapsayıcıya yani container sınıfına display: flex olarak belirtmeliyiz.

flex-direction Özelliği Kullanımı

Display:flex olarak belirttiğimizde flex-direction özelliği default row olarak gelir.

.container{
    display: flex;
    flex-direction: row;
    background: #673ab7;
    height: 100vh;
}

flex-direction: row özelliğini kullandığımızda container içindeki div etiketleri yatayda yani yan yana sıralandı.

• 

flex-direction: column özelliği kullandığımızda container içindeki div etiketleri dikeyde yani alt alta sıralar.

• 

justify-content Özelliği Kullanımı

flex-direction:row olduğunda justify-content özelliği yatayda hizalama yapar.

flex-direction:column olduğunda justify-content özelliği dikeyde hizalama yapar.

flex-start: Bulunduğu yerin başlangıç yerine hizalar.

flex-end:Bulunduğu alanın sonuna hizalar.

center:Bulunduğu alanda ortalar.

space-between: En kenarlara yayılır.Birbirlerinden en uzak kısımda hizalar.

space-around:Kenarlarda belli bir boşluk bırakarak yayılır.

space-evenly:Tüm div etiketleri arası eşit boşlukta olur.

.container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    background: #673ab7;
    height: 100vh;
}

Örneğin justify-content:center özelliğini kullandığımız için yatayda hizalar.

• 

Flex ile Yatayda ve Dikeyde Hizalama

Örneğin flex-direction:row olarak kullandığımızda yatay ve dikeyde hizalamak için justif-content:center ve align-items:center kullanmamız gerekir.

.container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #673ab7;
    height: 100vh;
}

• 

Örneğin flex-direction:column olarak kullandığımızda yatay ve dikeyde hizalamak için justif-content:center ve align-items:center kullanmamız gerekir.

.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #673ab7;
    height: 100vh;
}

• 

CSS ile diğer önemli kullanımlar için tıklayın.

CSS flex kullanımı ile ilgili projelerime web sitemden ulaşabilirsiniz.