CSS Flex Yapısı Nedir?

CSS Flexbox (Flexible Box) düzeni, web sayfalarınızda öğelerin düzenini ve hizalamasını daha esnek bir şekilde kontrol etmenizi sağlayan bir düzen modelidir. Flexbox, özellikle karmaşık düzen gereksinimleri olan web sayfaları için çok kullanışlıdır. Flexbox ile öğeler arasındaki boşlukları, hizalamayı ve öğelerin büyüklüğünü kolayca ayarlayabilirsiniz.

CSS Flexbox yapısı, aşağıdaki temel bileşenlerden oluşur:

• Container (Kutu): Flexbox düzenini oluşturmak için bir kutu (container) gerekir. Bu kutu, içindeki öğeleri düzenlemek için kullanılır. Bir container, öğeleri içerisine alır ve bu öğeleri düzenler.

• İçerik Öğeleri (Items): Container içinde düzenlenen öğeleri ifade eder. İçerik öğeleri, container içinde hizalama ve düzenleme kurallarına tabidir.

CSS Flexbox kullanırken, container üzerinde belirli özellikleri kullanarak içerik öğelerini nasıl düzenleyeceğinizi belirlersiniz. İşte temel bazı özellikler:

• display: flex;:”Container'ı bir flex container olarak belirtir.

• flex-direction: Öğelerin sıralanma yönünü belirler (row, row-reverse, column, column-reverse).

• justify-content: Öğeleri yatay eksende (row) nasıl hizalayacağınızı belirler (flex-start, flex-end, center, space-between, space-around).

• align-items: Öğeleri dikey eksende (column) nasıl hizalayacağınızı belirler (flex-start, flex-end, center, baseline, stretch).

• align-self: İçerik öğeleri için tek tek dikey hizalama ayarları yapmanıza olanak sağlar.

• flex-grow ve flex-shrink: Öğelerin büyüklüğünü ve küçüklüğünü nasıl ayarlayacağınızı belirler.

• flex-basis: Öğelerin temel boyutunu (genişlik veya yükseklik) belirler.

• flex-wrap: Öğelerin bir sıra veya çoklu sıralar halinde nasıl yerleştirileceğini belirler.

Bu özelliklerin kullanımı, içerik öğelerinizi istediğiniz gibi düzenlemenizi sağlar.

Flexbox, karmaşık düzenler oluştururken kolayca anlaşılabilir ve kullanılabilir bir yapı sunar.

Display

<style type="text/css"> body{ background: #353646; } .container{ display: flex; } .item{ display: flex; justify-content: center; background: #ffb745; border-radius: 5px; padding: 10px; width: 100px; height: 100px; margin:10px; align-items: center; font-size: 40px; font-weight: bolder; color: #353646; } </style> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>

Flex-Direction

<style type="text/css"> body{ background: #353646; } .container{ display: flex; flex-direction: row; } .container2{ display: flex; flex-direction: row-reverse; } .item{ display: flex; justify-content: center; background: #ffb745; border-radius: 5px; padding: 10px; width: 100px; height: 100px; margin:10px; align-items: center; font-size: 40px; font-weight: bolder; color: #353646; } </style> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <div class="container2"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>

<style type="text/css"> body{ background: #353646; } .container{ display: flex; flex-direction: column; } .container2{ display: flex; flex-direction: column-reverse; } .item{ display: flex; justify-content: center; background: #ffb745; border-radius: 5px; padding: 10px; width: 100px; height: 100px; margin:10px; align-items: center; font-size: 40px; font-weight: bolder; color: #353646; } </style> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <hr> <div class="container2"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>

Flex-wrap

<style type="text/css"> body{ background: #353646; } .container{ display: flex; flex-wrap: wrap; } .container2{ display: flex; flex-wrap: wrap-reverse; } .item{ display: flex; justify-content: center; background: #ffb745; border-radius: 5px; padding: 10px; width: 150px; height: 150px; margin:10px; align-items: center; font-size: 40px; font-weight: bolder; color: #353646; } </style> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> </div> <hr> <div class="container2"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> </div>

<style type="text/css"> body{ background: #353646; } .container{ display: flex; flex-wrap: nowrap; } .item{ display: flex; justify-content: center; background: #ffb745; border-radius: 5px; padding: 10px; width: 150px; height: 150px; margin:10px; align-items: center; font-size: 40px; font-weight: bolder; color: #353646; } </style> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> </div>

Justify-content

<style type="text/css"> body{ background: #353646; } .container{ display: flex; justify-content: flex-start; } .container2{ display: flex; justify-content: flex-end; } .container3{ display: flex; justify-content: center; } .container4{ display: flex; justify-content: space-between; } .container5{ display: flex; justify-content: space-around; } .container6{ display: flex; justify-content: space-evenly; } .item{ display: flex; justify-content: center; background: #ffb745; border-radius: 5px; padding: 10px; width: 100px; height: 100px; margin:10px; align-items: center; font-size: 40px; font-weight: bolder; color: #353646; } </style> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> <hr> <div class="container2"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> <hr> <div class="container3"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> <hr> <div class="container4"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> <hr> <div class="container5"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> <hr> <div class="container6"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div>