Esnek Kutu (Flex)

Flexbox v5'e dahildir.

Bileşenlerin ve daha fazlasının yerleşimini, hizalamasını ve boyutlandırılmasını hızla yönetin.

Esnek kutu (Flexbox)#

Kapsayıcıyı esnek kutu modeline geçirmek için d-flex veya d-inline-flex değeri verilmelidir.

d-flex ve d-inline-flex için duyarlı sınıflar mevcuttur.

Responsive bir şekilde kırılım noktalarına göre kullanabilirsiniz. Detaylı bilgi Izgara Sistemi

d-flex

d-inline-flex

<div class="d-flex">d-flex</div>
<div class="d-flex">d-inline-flex</div>

.d-flex
.d-inline-flex
.d-md-flex
.d-md-inline-flex

Esnek kutu yönü#

Kutu dizilim yönünü flex-direction-* ile belirleyebilirsiniz.

Yatay kutu yönü#

Yatay bir yön ayarlamak için .flex-direction-row (tarayıcı varsayılanı) veya yatay yönü tersten başlatmak için .flex-direction-row-reverse kullanın.

Flex element 1

Flex element 2

Flex element 3

Flex element 1

Flex element 2

Flex element 3

<div class="d-flex">d-inline-flex</div>

Dikey kutu yönü#

Dikey bir yön ayarlamak için .flex-direction-column (tarayıcı varsayılanı) veya dikey yönü tersten başlatmak için .flex-direction-column-reverse kullanın.

Flex element 1

Flex element 2

Flex element 3

Flex element 1

Flex element 2

Flex element 3

<div class="d-flex flex-direction-column">
  <div>Flex element 1</div>
  <div>Flex element 2</div>
  <div>Flex element 3</div>
</div>
<div class="d-flex flex-direction-column-reverse">
  <div>Flex element 1</div>
  <div>Flex element 2</div>
  <div>Flex element 3</div>
</div>

Kutuları Konumlandırma için Hizalama makalemize göz atabilirsiniz.

Flex-wrap#

nowrap (varsayılan) = Tüm öğeleri tek bir satıda yan yana listeler.
wrap = Öğeler gerektiğinde birden fazla satırda aşağıdan yukarı doğru listelenir.
wrap-reverse = Öğeler gerektiğinde birden fazla satırda yukarıdan aşağı doğru listelenir.

<div class="flex-nowrap">...</div>
<div class="flex-wrap">...</div>
<div class="wrap-reverse">...</div>

nowrap#

Varsayılan olarak esnek öğeler tek bir satıra sığmaya çalışırlar. flex-wrap: nowrap;

Varsayılan olduğu için bu yapı için ek bir class tanımlaması yapmanıza gerek kalmaz.

Flex element

<div class="d-flex">
  <div>Flex element</div>
  <div>Flex element</div>
  <div>Flex element</div>
  <div>Flex element</div>
  <div>Flex element</div>
</div>

wrap#

Gerektiğinde birden fazla satıra yaymak için flex-wrap: wrap; özelliği kullanabilirsiniz.

Flex element 1

Flex element 2

Flex element 3

Flex element 4

Flex element 5

Flex element 6

<div class="d-flex flex-wrap">
  <div>Flex element</div>
  <div>Flex element</div>
  <div>Flex element</div>
</div>

wrap-reverse#

Gerektiğinde birden fazla satıra yaymak için flex-wrap: wrap; özelliği kullanabilirsiniz.

Flex element 1

Flex element 2

Flex element 3

Flex element 4

Flex element 5

Flex element 6

<div class="d-flex flex-wrap">
  <div>Flex element</div>
  <div>Flex element</div>
  <div>Flex element</div>
</div>

Order#

Öğelerin sıralanışını değiştirmek için kullanılır. Burada dikkat edilmesi gereken, varsayılan olarak 0 olduğu için tüm öğeler, eğer sonuncu öğeyi bir öncesine almak isterseniz, bir önceki öğeninde order değerini belirtmeniz gerekir.

Flex element 1

Flex element 2

Flex element 3

<div class="d-flex">
  <div class="order-3">Flex element 1</div>
  <div class="order-2">Flex element 2</div>
  <div class="order-1">Flex element 3</div>
</div>

Kutuları yeniden sıralamak için Sıralama makalemize göz atabilirsiniz.