CSS Flexbox İle Responsive Tasarım

Sezai AlkanFrontend Developer

Css #css #flex #row

Web tasarımda esneklik ve uyumluluk, modern web sayfalarının olmazsa olmazlarıdır. Bu nedenle, Css Flexbox web tasarımcılarının resposive tasarım için kullanabileceği önemli bir araçtır. Css Flexbox, sütun ve satırları hızlı ve kolay bir şekilde oluşturmanıza ve özelleştirmenize olanak tanır.

Css Flexbox, bir konteynır ve bu konteynır içindeki öğeler arasındaki ilişkiyi kontrol eden bir düzen modelidir. Flexbox, Css display özelliği ile birlikte kullanılır ve bir öğenin Flexbox olup olmadığını belirlemek için display: flex olarak tanımlanır.

Container oluşturma

Bir flex container oluşturmak için HTML öğesine display: flex stilini ekliyoruz. 

<div class="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

.container {
  display: flex;
}

Yukarıdaki örnekte container sınıfına ait bir div bulunmaktadır. Bu div içerisinde ise üç adet item sınıfı ait nesne bulunmaktadır.

Container yönünü belirleme

container 'ın yönünü belirlemek için flex-direction özelliği kullanılmaktadır. Varsayılan değer olarak row (yatay) dır, ancak column (dikey), row-reverse, column-reverse gibi değerler alabilmektedir.

Örneğin container 'ın dikey olmasını istiyor isek

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

Yukarıdaki örnek container 'ın yönünü dikey olarak değiştirecektir.

Boyutlandırma

container içerisindeki nesneleri boyutlandırmak için flex-basis, flex-grow ve flex-shrink özelliklerini kullanabiliriz.

• flex-basis : Başlangıç boyutunu belirler
• flex-grow : Boş alanın boyutunu belirler
• flex-shrink : Nesnenin maximum boyutunu belirler

Responsive Tasarım

Responsive tasarım, bir web sayfasının farklı ekran boyutlarına uyacak şekilde tasarlanmasıdır. Flexbox, responsive tasarım için ideal bir yoldur, öğelerin boyutunu ve konumunu farklı ekran boyutlarına göre otomatik olarak ayarlanabilmektedir.

991 piksel ve altındaki ekran boyutları için container 'ın flex-direction özelliği değiştirerek, container altındaki nesnelerin yerleşimini dikey olmasını sağlayabiliriz.

@media screen and (max-width: 991px) {
  .container {
    flex-direction: column;
  }
}

Yukarıdaki örnekte ekran boyutu 991 piksel ve altında olduğunda container 'ın yönü dikey olacaktır.