CSS Flexbox İle Responsive Tasarım

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.