Bootstrap 5 Flex

Esnek çerçeve

Bootstrap 3 ve Bootstrap 4 & 5 arasındaki en büyük fark, Bootstrap 5'nin şimdi dizaynı işlemek için flexbox kullanmasıdır,而不是yüzdüklü.

Esnek çerçeve modülü, yüzdüklü veya konumlandırma kullanmadan esnek yanıt verici yapıları daha kolay tasarlamayı sağlar.

Flex ile aşina olmayan biriyseniz, sitelerimizde CSS Flexbox Eğitimi örneğin.

Açıklama：IE9 ve daha eski sürümler Flexbox'i desteklememektedir.

Açıklama：IE8-9 desteğine ihtiyacınız varsa, Bootstrap 3 kullanın. Bu en istikrarlı Bootstrap sürümüdür, ekipler hala kritik hata düzeltmeleri ve belge değişiklikleri için destek vermektedir. Ancak, yeni işlevler eklenmeyecektir.

Örnek

Flexbox konteyneri oluşturmak ve doğrudan alt öğeleri flex öğelerine dönüştürmek için lütfen d-flex Sınıf:

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Elastik Proje 1</div>
  <div class="p-2 bg-warning">Elastik Proje 2</div>
  <div class="p-2 bg-primary">Elastik Proje 3</div>
</div>

Kişisel olarak deneyin

Örnek

Satır içi flexbox konteyneri oluşturmak için lütfen d-inline-flex Sınıf:

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Elastik Proje 1</div>
  <div class="p-2 bg-warning">Elastik Proje 2</div>
  <div class="p-2 bg-primary">Elastik Proje 3</div>
</div>

Kişisel olarak deneyin

Yatay yönde

Lütfen .flex-row Yatay olarak (yanyana) esnek öğeleri göster. Bu, varsayılan ayar.</div>

<div class="p-2 bg-primary flex-grow-1">Elastik Proje 3</div>otomatik dış kenar boşluğu .flex-row-reverse Düzeltmek için sağa doğru hizaletmek mümkündür:

Örnek

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">Elastik Proje 1</div>
  <div class="p-2 bg-warning">Elastik Proje 2</div>
  <div class="p-2 bg-primary">Elastik Proje 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">Elastik Proje 1</div>
  <div class="p-2 bg-warning">Elastik Proje 2</div>
  <div class="p-2 bg-primary">Elastik Proje 3</div>
</div>

Kişisel olarak deneyin

dikey yönde

Lütfen .flex-column Flex öğelerini dikey olarak göster (birbirine katlanmış), veya .flex-column-reverse Yatay yönde ters çevir:

Örnek

<div class="d-flex flex-column">
  <div class="p-2 bg-info">Elastik Proje 1</div>
  <div class="p-2 bg-warning">Elastik Proje 2</div>
  <div class="p-2 bg-primary">Elastik Proje 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">Elastik Proje 1</div>
  <div class="p-2 bg-warning">Elastik Proje 2</div>
  <div class="p-2 bg-primary">Elastik Proje 3</div>
</div>

Kişisel olarak deneyin

İçeriği hizalayın

otomatik dış kenar boşluğu .justify-content-* Sınıflar, esnek öğelerin hizalanmasını değiştirebilir. Geçerli sınıflar:

  • başlangıçta（Varsayılan）
  • sonra
  • merkezde
  • arasında
  • etrafında

Örnek

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Kişisel olarak deneyin

Eş geniş

İpucu： .flex-fill Onları eş geniş yapabilirsiniz:

Örnek

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Esnek öğe 1</div>
  <div class="p-2 bg-warning flex-fill">Esnek öğe 2</div>
  <div class="p-2 bg-primary flex-fill">Esnek öğe 3</div>
</div>

Kişisel olarak deneyin

Genişlet

İpucu： .flex-grow-1 Aşırı alanı kullanabilirsiniz. Aşağıdaki örnekte, ilk iki flex öğesi gerekli alanı kaplar, son öğe ise kalan kullanılabilir alanı kaplar:

Örnek

<div class="d-flex">
  <div class="p-2 bg-info">Elastik Proje 1</div>
  <div class="p-2 bg-warning">Elastik Proje 2</div>
  
弹性项目 3

</div>

Kişisel olarak deneyin

<div class="p-2 bg-primary flex-grow-1">Elastik Proje 3</div>İpucu： flex projelerinde .flex-shrink-1

Sıralama

otomatik dış kenar boşluğu 可使其在必要时收缩。 .sira

Örnek

<div class="d-flex bg-secondary">
  类可更改特定 flex 项的视觉顺序。有效的类从 0 到 5，其中最低的数字具有最高的优先级（order-1 显示在 order-2 之前，以此类推）：
  <div class="p-2 bg-info order-3">Elastik Proje 1</div>
  <div class="p-2 bg-warning order-2">Elastik Proje 2</div>
</div>

Kişisel olarak deneyin

<div class="p-2 bg-primary order-1">Elastik Proje 3</div>

otomatik dış kenar boşluğu .ms-autoveya .me-auto（项目ı sola iterek）Elastik projelere otomatik kenar boşluğu eklemek kolaydır：

Örnek

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">Elastik Proje 1</div>
  <div class="p-2 bg-warning">Elastik Proje 2</div>
  <div class="p-2 bg-primary">Elastik Proje 3</div>
</div>
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">Elastik Proje 1</div>
  <div class="p-2 bg-warning">Elastik Proje 2</div>
  <div class="p-2 me-auto bg-primary">Elastik Proje 3</div>
</div>

Kişisel olarak deneyin

Satır değişim

aracılığıyla .flex-nowrap（默认）、.flex-wrap veya .flex-wrap-reverse，可控制 flex 项目如何包装在 flex 容器中。

Örnek

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

Kişisel olarak deneyin

İçeriği hizalayın

Lütfen .hizal-icerik-* 类控制弹性项目的垂直对齐方式。有效的类是：

  • .hizal-icerik-baslangic（Varsayılan）
  • .hizal-icerik-son
  • .hizal-icerik-merkez
  • .align-content-arasında
  • .align-content-around
  • .align-content-uzat

Açıklama：Bu sınıflar tek satırlık esnek öğelere etki etmez.

Aşağıdaki düğmeye tıklayarak esnek öğelerin dikey hizalama tarzını değiştirerek beş sınıf arasındaki farkları görmek için lütfen tıklayın：

Örnek

<div class="d-flex flex-wrap align-content-başlangıçta">..</div>
<div class="d-flex flex-wrap align-content-sona">..</div>
<div class="d-flex flex-wrap align-content-merkezde">..</div>
<div class="d-flex flex-wrap align-content-around">..</div>
<div class="d-flex flex-wrap align-content-uzat">..</div>

Kişisel olarak deneyin

Projeleri hizalayın

Lütfen .align-items-* Sınıf kontrolüTek satırEsnek öğelerin dikey hizalama tarzı. Geçerli sınıflar şunlardır：

  • .align-items-başlangıçta
  • .align-items-sona
  • .align-items-merkezde
  • .align-items-taban-bazlı
  • .align-items-uzat（Varsayılan）

Aşağıdaki düğmelere tıklayarak beş sınıf arasındaki farkları görmek için lütfen tıklayın：

Örnek

<div class="d-flex align-items-başlangıçta">..</div>
<div class="d-flex align-items-sona">..</div>
<div class="d-flex align-items-merkezde">..</div>
<div class="d-flex align-items-taban-bazlı">..</div>
<div class="d-flex align-items-uzat">..</div>

Kişisel olarak deneyin

Kendi hizalama

Lütfen .kendini-yerleştir-* Sınıf kontrolüEsnek öğeyi belirtindikey hizalama tarzı. Geçerli sınıflar şunlardır：

  • .başlangıçta-yerleştir
  • .sona-yerleştir
  • .merkezde-yerleştir
  • .taban-bazlı-yerleştir
  • .kendini-uzat（Varsayılan）

Aşağıdaki düğmeye tıklayarak beş sınıf arasındaki farkları görmek için:

Örnek

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">Flex öğesi 1</div>
  <div class="p-2 border align-self-start">Flex öğesi 2</div>
  <div class="p-2 border">Flex öğesi 3</div>
</div>

Kişisel olarak deneyin

Yanıt Veren Flex Sınıfları

Tüm esnek sınıflar, belirli ekran boyutlarında belirli flex sınıflarını ayarlamayı kolaylaştıran ekstra yanıt sınıflarıyla birlikte gelir.

* sembolü, küçük, orta, büyük, çok büyük ve devasa ekranları temsil eden sm, md, lg, xl veya xxl ile değiştirilebilir.

Belirli bir esnek sınıfı aramak için.

Sınıf Açıklama Örnek
Esnek konteyner
.d-*-flex Farklı ekranlar için flexbox konteynerleri oluşturmak için. Deneyin
.d-*-inline-flex Farklı ekranlar için satır içi flexbox konteynerleri oluşturmak için. Deneyin
Yönelim
.flex-*-row Farklı ekranlarda yatay olarak esnek projeleri gösterir. Deneyin
.flex-*-row-reverse Farklı ekranlarda yatay ve sağa yuvarlak olarak esnek projeleri gösterir. Deneyin
.flex-*-column Farklı ekranlarda dikey olarak esnek projeleri gösterir. Deneyin
.flex-*-column-reverse Farklı ekranlarda ters sırayla dikey olarak esnek projeleri gösterir. Deneyin
Yatay sıralı içerik
.justify-content-*-start Farklı ekranlarda baştan (solda yuvarlak) esnek projeleri gösterir. Deneyin
.justify-content-*-end Farklı ekranların sonunda (sağda yuvarlak) esnek projeleri gösterir. Deneyin
.justify-content-*-center Farklı ekranlardaki esnek konteynerlerin merkezinde esnek projeleri gösterir. Deneyin
.justify-content-*-between Farklı ekranlarda esnek projeleri eşit olarak gösterir. Deneyin
.justify-content-*-around Farklı ekranlarda esnek projeleri 'etrafında' gösterir. Deneyin
Doldurma / Aynı genişlikte
.flex-*-fill Geçici esnek projelerin farklı ekranlardaki genişliklerini eşit hale zorlar. Deneyin
Genişletmek
.flex-*-grow-0 Projelerin farklı ekranlarda genişlemesine izin vermeyin.
.flex-*-grow-1 Farklı ekranlarda projelerin genişlemesini sağlar.
Sıkıştırmak
.flex-*-shrink-0 Projeleri farklı ekranlarda küçültmeyin.
.flex-*-shrink-1 Projeleri farklı ekranlarda küçültün.
Sıralama
.order-*-0-12 Küçük ekranlarda 0'dan 12'ye sıraları değiştirin. Deneyin
Satır değişim
.flex-*-nowrap Farklı ekranlarda projelerin satır değişimlarını yapmayın. Deneyin
.flex-*-wrap Farklı ekranlarda projelerin satır değişimlarını yapın. Deneyin
.flex-*-wrap-reverse Farklı ekranlarda projelerin satır değişimlerini tersine çevirin. Deneyin
İçeriği hizalayın
.align-content-*-start Farklı ekranlarda başlangıçta projeleri hizalayın. Deneyin
.align-content-*-end Farklı ekranların sonunda projeleri hizalayın. Deneyin
.align-content-*-center Farklı ekranların merkezinde projeleri hizalayın. Deneyin
.align-content-*-around Farklı ekranların etrafında projeleri hizalayın. Deneyin
.align-content-*-stretch Farklı ekranlarda projeleri sürükleyin. Deneyin
Projeleri hizalayın
.align-items-*-start Farklı ekranlarda başlangıçta tek satırlık projeleri hizalayın. Deneyin
.align-items-*-end Farklı ekranların sonunda tek satırlık projeleri hizalayın. Deneyin
.align-items-*-center Farklı ekranların merkezinde tek satırlık projeleri hizalayın. Deneyin
.align-items-*-baseline Farklı ekranların temel hatlarında tek satırlık projeleri hizalayın. Deneyin
.align-items-*-stretch Farklı ekranlarda tek satırlık projeleri sürükleyin. Deneyin
Kendi kendini hizalayın
.align-self-*-start Farklı ekranlarda başlangıçta elastic projeleri hizalayın. Deneyin
.align-self-*-end Farklı ekranların sonunda elastic projeleri hizalayın. Deneyin
.align-self-*-center Farklı ekranların merkezinde elastic projeleri hizalayın. Deneyin
.align-self-*-baseline Farklı ekranların temel hatlarında elastic projeleri hizalayın. Deneyin
.align-self-*-stretch Elastic projeleri farklı ekranlarda sürükleyin. Deneyin