Esnek
Tam bir duyarlı flexbox yardımcı programı paketiyle ızgara sütunlarının, navigasyonun, bileşenlerin ve daha fazlasının yerleşimini, hizalamasını ve boyutlandırılmasını hızla yönetin. Daha karmaşık uygulamalar için özel CSS gerekli olabilir.
displayBir esnek kutu kabı oluşturmak ve doğrudan alt öğeleri esnek öğelere dönüştürmek için yardımcı programları uygulayın . Esnek kaplar ve öğeler, ek esnek özelliklerle daha fazla değiştirilebilir.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div><div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>Duyarlı varyasyonlar da ve için .d-flexmevcuttur .d-inline-flex.
.d-flex.d-inline-flex.d-sm-flex.d-sm-inline-flex.d-md-flex.d-md-inline-flex.d-lg-flex.d-lg-inline-flex.d-xl-flex.d-xl-inline-flex
Yön yardımcı programlarıyla esnek bir kapta esnek öğelerin yönünü ayarlayın. Çoğu durumda, tarayıcı varsayılanı olduğu için yatay sınıfı burada atlayabilirsiniz row. Ancak, bu değeri açıkça ayarlamanız gereken durumlarla (duyarlı düzenler gibi) karşılaşabilirsiniz.
.flex-rowYatay bir yön (tarayıcı varsayılanı) ayarlamak veya .flex-row-reverseyatay yönü karşı taraftan başlatmak için kullanın .
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>.flex-columnDikey yönü ayarlamak veya .flex-column-reversedikey yönü karşı taraftan başlatmak için kullanın .
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>için duyarlı varyasyonlar da mevcuttur flex-direction.
.flex-row.flex-row-reverse.flex-column.flex-column-reverse.flex-sm-row.flex-sm-row-reverse.flex-sm-column.flex-sm-column-reverse.flex-md-row.flex-md-row-reverse.flex-md-column.flex-md-column-reverse.flex-lg-row.flex-lg-row-reverse.flex-lg-column.flex-lg-column-reverse.flex-xl-row.flex-xl-row-reverse.flex-xl-column.flex-xl-column-reverse
justify-contentAna eksendeki esnek öğelerin hizalamasını değiştirmek için esnek kutu kaplarındaki yardımcı programları kullanın (başlangıç için x ekseni, ise y ekseni flex-direction: column). start(tarayıcı varsayılanı), end, center, betweenveya arasından seçim yapın around.
<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>için duyarlı varyasyonlar da mevcuttur justify-content.
.justify-content-start.justify-content-end.justify-content-center.justify-content-between.justify-content-around.justify-content-sm-start.justify-content-sm-end.justify-content-sm-center.justify-content-sm-between.justify-content-sm-around.justify-content-md-start.justify-content-md-end.justify-content-md-center.justify-content-md-between.justify-content-md-around.justify-content-lg-start.justify-content-lg-end.justify-content-lg-center.justify-content-lg-between.justify-content-lg-around.justify-content-xl-start.justify-content-xl-end.justify-content-xl-center.justify-content-xl-between.justify-content-xl-around
align-itemsÇapraz eksendeki esnek öğelerin hizalamasını değiştirmek için esnek kutu kaplarındaki yardımcı programları kullanın (y ekseni başlangıç, x ekseni ise flex-direction: column). start, end, center, baselineveya stretch(tarayıcı varsayılanı) arasından seçim yapın .
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>için duyarlı varyasyonlar da mevcuttur align-items.
.align-items-start.align-items-end.align-items-center.align-items-baseline.align-items-stretch.align-items-sm-start.align-items-sm-end.align-items-sm-center.align-items-sm-baseline.align-items-sm-stretch.align-items-md-start.align-items-md-end.align-items-md-center.align-items-md-baseline.align-items-md-stretch.align-items-lg-start.align-items-lg-end.align-items-lg-center.align-items-lg-baseline.align-items-lg-stretch.align-items-xl-start.align-items-xl-end.align-items-xl-center.align-items-xl-baseline.align-items-xl-stretch
align-selfÇapraz eksendeki hizalamalarını ayrı ayrı değiştirmek için flexbox öğelerindeki yardımcı programları kullanın (y ekseni başlangıç için, x ekseni ise flex-direction: column). align-items: start, end, center, baselineveya ile aynı seçenekler arasından seçim yapın stretch(tarayıcı varsayılanı).
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>için duyarlı varyasyonlar da mevcuttur align-self.
.align-self-start.align-self-end.align-self-center.align-self-baseline.align-self-stretch.align-self-sm-start.align-self-sm-end.align-self-sm-center.align-self-sm-baseline.align-self-sm-stretch.align-self-md-start.align-self-md-end.align-self-md-center.align-self-md-baseline.align-self-md-stretch.align-self-lg-start.align-self-lg-end.align-self-lg-center.align-self-lg-baseline.align-self-lg-stretch.align-self-xl-start.align-self-xl-end.align-self-xl-center.align-self-xl-baseline.align-self-xl-stretch
.flex-fillMevcut tüm yatay alanı kaplarken onları eşit genişliklere zorlamak için bir dizi kardeş öğe üzerinde sınıfı kullanın . Özellikle eşit genişlikte veya gerekçeli gezinme için kullanışlıdır.
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>için duyarlı varyasyonlar da mevcuttur flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill
.flex-grow-*Esnek bir öğenin mevcut alanı dolduracak şekilde büyüme yeteneğini değiştirmek için yardımcı programları kullanın . Aşağıdaki örnekte, .flex-grow-1öğeler, kalan iki esnek öğeye gerekli alanlarını sağlarken, tüm kullanılabilir alanı kullanır.
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Third flex item</div>
</div>.flex-shrink-*Esnek bir öğenin gerektiğinde küçültme özelliğini değiştirmek için yardımcı programları kullanın . Aşağıdaki örnekte, ile ikinci esnek öğe, .flex-shrink-1içeriğini yeni bir satıra sarmaya zorlanır, önceki esnek öğe için daha fazla alan sağlamak için "küçülür" .w-100.
<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight">Flex item</div>
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>Duyarlı varyasyonlar da ve için flex-growmevcuttur flex-shrink.
.flex-{grow|shrink}-0.flex-{grow|shrink}-1.flex-sm-{grow|shrink}-0.flex-sm-{grow|shrink}-1.flex-md-{grow|shrink}-0.flex-md-{grow|shrink}-1.flex-lg-{grow|shrink}-0.flex-lg-{grow|shrink}-1.flex-xl-{grow|shrink}-0.flex-xl-{grow|shrink}-1
Flexbox, esnek hizalamaları otomatik kenar boşluklarıyla karıştırdığınızda oldukça harika şeyler yapabilir. Aşağıda, otomatik kenar boşlukları aracılığıyla esnek öğeleri kontrol etmenin üç örneği gösterilmektedir: varsayılan (otomatik kenar boşluğu yok), iki öğeyi sağa .mr-autoitme ( ) ve iki öğeyi sola itme ( .ml-auto).
Ne yazık ki, IE10 ve IE11, üst öğesi varsayılan olmayan bir justify-contentdeğere sahip esnek öğelerde otomatik kenar boşluklarını düzgün şekilde desteklemez. Daha fazla ayrıntı için bu StackOverflow yanıtına bakın.
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="mr-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>align-itemsBir esnek öğeyi , flex-direction: columnve margin-top: autoveya karıştırarak bir kabın üstüne veya altına dikey olarak taşıyın margin-bottom: auto.
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
<div class="mb-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>Esnek öğelerin esnek bir kapta nasıl sarılacağını değiştirin. ile hiç sarmalama (tarayıcı varsayılanı) .flex-nowrap, ile sarma .flex-wrapveya ile ters sarma arasından seçim yapın .flex-wrap-reverse.
<div class="d-flex flex-nowrap">
...
</div><div class="d-flex flex-wrap">
...
</div><div class="d-flex flex-wrap-reverse">
...
</div>için duyarlı varyasyonlar da mevcuttur flex-wrap.
.flex-nowrap.flex-wrap.flex-wrap-reverse.flex-sm-nowrap.flex-sm-wrap.flex-sm-wrap-reverse.flex-md-nowrap.flex-md-wrap.flex-md-wrap-reverse.flex-lg-nowrap.flex-lg-wrap.flex-lg-wrap-reverse.flex-xl-nowrap.flex-xl-wrap.flex-xl-wrap-reverse
Bir avuç yardımcı programla belirli esnek öğelerin görsel sırasını değiştirin order. DOM siparişini kullanmak için yalnızca bir öğeyi ilk veya son yapmak için seçenekler ve ayrıca sıfırlama sağlarız. orderHerhangi bir tamsayı değeri alırken (örneğin, ) 5, gereken ek değerler için özel CSS ekleyin.
<div class="d-flex flex-nowrap bd-highlight">
<div class="order-3 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second flex item</div>
<div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>için duyarlı varyasyonlar da mevcuttur order.
.order-0.order-1.order-2.order-3.order-4.order-5.order-6.order-7.order-8.order-9.order-10.order-11.order-12.order-sm-0.order-sm-1.order-sm-2.order-sm-3.order-sm-4.order-sm-5.order-sm-6.order-sm-7.order-sm-8.order-sm-9.order-sm-10.order-sm-11.order-sm-12.order-md-0.order-md-1.order-md-2.order-md-3.order-md-4.order-md-5.order-md-6.order-md-7.order-md-8.order-md-9.order-md-10.order-md-11.order-md-12.order-lg-0.order-lg-1.order-lg-2.order-lg-3.order-lg-4.order-lg-5.order-lg-6.order-lg-7.order-lg-8.order-lg-9.order-lg-10.order-lg-11.order-lg-12.order-xl-0.order-xl-1.order-xl-2.order-xl-3.order-xl-4.order-xl-5.order-xl-6.order-xl-7.order-xl-8.order-xl-9.order-xl-10.order-xl-11.order-xl-12
Esnek öğeleri çapraz eksende align-contenthizalamak için esnek kutu kaplarındaki yardımcı programları kullanın . (tarayıcı varsayılanı), , , , veya arasından seçim yapın . Bu yardımcı programları göstermek için esnek öğelerin sayısını zorunlu kıldık ve artırdık.startendcenterbetweenaroundstretchflex-wrap: wrap
Önüne bak! Bu özelliğin tek sıra esnek öğe üzerinde hiçbir etkisi yoktur.
<div class="d-flex align-content-start flex-wrap">
...
</div><div class="d-flex align-content-end flex-wrap">...</div><div class="d-flex align-content-center flex-wrap">...</div><div class="d-flex align-content-between flex-wrap">...</div><div class="d-flex align-content-around flex-wrap">...</div><div class="d-flex align-content-stretch flex-wrap">...</div>için duyarlı varyasyonlar da mevcuttur align-content.
.align-content-start.align-content-end.align-content-center.align-content-around.align-content-stretch.align-content-sm-start.align-content-sm-end.align-content-sm-center.align-content-sm-around.align-content-sm-stretch.align-content-md-start.align-content-md-end.align-content-md-center.align-content-md-around.align-content-md-stretch.align-content-lg-start.align-content-lg-end.align-content-lg-center.align-content-lg-around.align-content-lg-stretch.align-content-xl-start.align-content-xl-end.align-content-xl-center.align-content-xl-around.align-content-xl-stretch