Tailwind CSS Display Sınıfları: hidden, block, inline, flex ve contents

Display sınıflarının tamamı

Bu değerlerin hepsi CLI çıktısıyla doğrulandı. Resmî display sayfası tablo ailesini daha da genişletir: table-caption, table-column, table-column-group, table-header-group, table-row-group ve table-footer-group sınıfları da vardır ve her biri adını taşıdığı tablo elemanı gibi davranır. Flex ve grid kapsayıcılarının asıl gücü bu sınıflarla birlikte kullanılan hizalama ve yerleşim sınıflarındadır; onları flexbox sınıfları ve grid-cols ve grid-rows yazılarında ayrıca ele aldık.

block, inline ve inline-block farkı

Bu üç değer metin akışında en sık karıştırılanlardır. inline bir parça, metin gibi satır satır kırılır ve kendisine verilen genişlik ya da yüksekliği dikkate almaz. inline-block satırın içinde durmaya devam eder ama bir kutu gibi davranır: içindeki metin kutunun dışına taşmaz, genişlik ve padding beklediğiniz gibi uygulanır. block ise elemanı kendi satırına taşır ve üst elemanın genişliğini doldurur. Resmî sayfadaki örnek bu üçünü aynı paragraf içinde yan yana gösterir.

Pratik bir kural: metnin içinde küçük bir etiket, rozet veya kod parçası istiyorsanız ve ona padding verecekseniz inline-block ya da inline-flex seçin. Yalnızca rengini veya kalınlığını değiştireceğiniz bir kelime için inline yeterlidir; span zaten varsayılan olarak satır içidir. Bir bağlantıyı tüm satırı kaplayan tıklanabilir bir alana dönüştürmek istiyorsanız block verirsiniz.

<span class="inline-block px-2">Etiket</span>
<nav class="hidden md:flex">Masaüstü menü</nav>
<button class="md:hidden">Menü</button>
<div class="flow-root">
  <div class="my-4">İçerik</div>
</div>

@layer utilities {
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .flow-root {
    display: flow-root;
  }
  .hidden {
    display: none;
  }
  .inline-block {
    display: inline-block;
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  @media (width >= 48rem) {
    .md\:flex {
      display: flex;
    }
    .md\:hidden {
      display: none;
    }
  }
}

Responsive gizleme ve gösterme

Yukarıdaki derlemede masaüstü menüsü hidden md:flex, mobil menü düğmesi md:hidden sınıflarını taşıyor. v4.3.5 ile derlenen CSS'te önekli sınıflar @media (width >= 48rem) bloğunun içinde ve önneksiz sınıflardan sonra geliyor. Bu sıra sayesinde mobilde hidden geçerli olur ve menü görünmez; ekran 48rem ve üstüne çıktığında aynı eleman için yazılmış md:flex daha sonra geldiği için kazanır ve menü flex kapsayıcı olarak görünür. Düğmede ise tersi olur: önneksiz hâlinde normal görünür, orta ekrandan itibaren md:hidden ile kaybolur.

Tailwind mobil öncelikli çalıştığı için önce küçük ekrandaki durumu, sonra önekle büyük ekrandaki değişikliği yazarsınız. "Yalnızca mobilde göster" için md:hidden, "yalnızca masaüstünde göster" için hidden md:block (ya da md:flex, md:grid) yazılır. Belirli bir aralıkta gizlemek için max-* önekleri vardır; bunlar breakpoint özelleştirme ve max aralıkları yazısında.

Aynı elemanda iki display sınıfı: hangisi kazanır?

Bir koşula bağlı olarak sınıf listesine hidden eklediğiniz bileşenlerde sık görülen bir tuzak vardır. Aşağıdaki iki elemanın sınıf listesi yalnızca sıralamada farklı:

<div class="flex hidden">A</div>
<div class="hidden inline-flex">B</div>

@layer utilities {
  .flex {
    display: flex;
  }
  .hidden {
    display: none;
  }
  .inline-flex {
    display: inline-flex;
  }
}

Üç kuralın da özgüllüğü aynı olduğundan, kazanan CSS dosyasında sonra gelendir; HTML'deki sınıf sırası hiçbir şeyi değiştirmez. Bu derlemede .hidden, .flex sınıfından sonra ama .inline-flex sınıfından önce yazıldı. Sonuç: A elemanı gizlenir, B elemanı ise hidden sınıfına rağmen inline-flex olarak görünür. Bu yüzden gizleme koşulunu "bir sınıf daha ekle" diye kurmak yerine display sınıfını koşula göre değiştirmek (ya inline-flex ya hidden) daha güvenlidir. Aynı özelliği yazan iki sınıfın genel çakışma kuralları çakışan sınıflar ve important yazısında.

Bir diğer seçenek HTML'in hidden özniteliğidir. Preflight bu öznitelik için [hidden]:where(:not([hidden='until-found'])) { display: none !important; } kuralını içerir. !important bulunduğu için hidden özniteliği taşıyan bir elemana flex sınıfı verseniz bile eleman gizli kalır. JavaScript ile görünürlük değiştirdiğiniz yerlerde özniteliği açıp kapatmak, sınıf listesiyle uğraşmaktan daha az sürpriz çıkarır. Preflight'ın diğer kuralları Preflight temel stiller yazısında.

inline-flex ve tablo sınıfları iş başında

Display sınıflarının ikisi gündelik işlerde beklenenden sık karşınıza çıkar: metnin içinde ikonla bir kelimeyi hizalayan inline-flex ve gerçek bir table elemanı kullanamadığınız yerlerde tablo düzeni kuran tablo ailesi. Aşağıdaki örnek resmî display sayfasındaki iki örneğin Türkçe ve kısaltılmış bir uyarlaması:

<p>Ödemeyi
  <span class="inline-flex items-baseline gap-1">
    <img class="size-4 self-center" src="kart.svg" alt="">
    <span>kartla</span>
  </span>
  yapabilirsiniz.
</p>
<div class="table w-full">
  <div class="table-header-group">
    <div class="table-row">
      <div class="table-cell">Ürün</div>
      <div class="table-cell">Fiyat</div>
    </div>
  </div>
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell">Alan adı</div>
      <div class="table-cell">120 TL</div>
    </div>
  </div>
</div>

@layer utilities {
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .table-cell {
    display: table-cell;
  }
  .table-header-group {
    display: table-header-group;
  }
  .table-row {
    display: table-row;
  }
  .table-row-group {
    display: table-row-group;
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .w-full {
    width: 100%;
  }
  .items-baseline {
    align-items: baseline;
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .self-center {
    align-self: center;
  }
}

İlk parçada inline-flex kapsayıcı paragrafın içinde bir kelime gibi akmaya devam ediyor, ama içindeki ikon ve metin artık bir flex satırının öğeleri. items-baseline metni çevredeki cümlenin taban çizgisine oturtuyor, self-center ise yalnızca ikonu dikeyde ortalıyor. Aynı yapıyı flex ile kursaydınız kapsayıcı blok düzeyinde olacağı için kendi satırına geçer ve cümleyi ikiye bölerdi. Çıktıda gap-1 sınıfının çarpım yerine doğrudan gap: var(--spacing) yazdığına da dikkat edin; CLI bir adımı bu şekilde sadeleştiriyor.

İkinci parçada her div adını taşıdığı tablo elemanının rolünü üstleniyor: table tablonun kendisi, table-header-group başlık grubu, table-row-group gövde, table-row satır, table-cell hücre. Sütun genişlikleri tıpkı gerçek bir tabloda olduğu gibi içeriğe göre hizalanır. Ancak bu yalnızca görsel bir düzendir; HTML açısından ortada hâlâ sıradan div elemanları vardır. Gerçekten tablo verisi gösteriyorsanız table, tr ve td elemanlarını kullanmak anlamsal olarak doğru yoldur; tablo sınıfları daha çok görsel olarak hizalanması gereken ama tablo olmayan içerikler içindir. Kendi tablolarınızın kenarlık ve düzen ayarları için resmî belgede table-layout ve border-collapse sayfaları bulunur.

contents ve flow-root

<div class="flex">
  <div class="flex-1">01</div>
  <div class="contents">
    <div class="flex-1">02</div>
    <div class="flex-1">03</div>
  </div>
</div>
<div class="grid grid-cols-3 gap-4">
  <div>01</div><div class="invisible">02</div><div>03</div>
</div>

@layer utilities {
  .invisible {
    visibility: hidden;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .flex-1 {
    flex: 1;
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
}

contents sınıfı, resmî sayfanın deyişiyle bir "hayalet" kapsayıcı oluşturur: elemanın kendisi kutu üretmez ve çocukları bir üstteki elemanın doğrudan çocukları gibi düzene katılır. Örnekte 02 ve 03, araya giren sarmalayıcıya rağmen flex satırının birer öğesi gibi davranır ve 01 ile birlikte alanı üç eşit parçaya bölerek paylaşır. Bir bileşen kütüphanesinin zorunlu kıldığı fazladan bir sarmalayıcı düzeninizi bozduğunda işe yarar. Kutunun kendisi olmadığı için ona verdiğiniz padding, kenarlık veya arka plan görünmez.

flow-root ise kendi blok biçimlendirme bağlamını oluşturan bir blok yapar. Resmî sayfadaki örnekte iki flow-root kutusunun içindeki my-4 margin'leri kutunun dışına taşmaz, kutunun içinde kalır. İçerideki çocukların margin'i üst elemanın dışına sızıyorsa ya da içeride kayan (float) öğeler varsa bu sınıf kapsayıcıyı onları içine alacak şekilde düzeltir.

hidden, invisible ve collapse

Bir şeyi ekrandan kaldırmanın üç yolu birbirinden çok farklı sonuç verir. hidden elemanı belgeden çıkarır: yer kaplamaz, komşular onun yokmuş gibi yerleşir. invisible ise visibility: hidden yazar; eleman görünmez ama yeri korunur. Yukarıdaki grid örneğinde 02 numaralı hücre invisible olduğu için 03 yine üçüncü sütunda kalır; hidden verseydiniz 03 ikinci sütuna kayardı. Resmî visibility sayfası, visible sınıfının çoğunlukla invisible etkisini belirli bir ekran boyutunda geri almak için kullanıldığını belirtir.

collapse sınıfı visibility: collapse üretir ve tablolar için tasarlanmıştır. Resmî sayfaya göre tablo satırlarını, satır gruplarını, sütunları ve sütun gruplarını display: none verilmiş gibi gizler, ancak diğer satır ve sütunların boyutunu etkilemez. Yani bir satırı gizleyip gösterdiğinizde sütun genişlikleri zıplamaz.

Ekran okuyucu için gizleme: sr-only

hidden ve invisible elemanı yardımcı teknolojilerden de gizler. Yalnızca görsel olarak gizlemek, örneğin ikon düğmesine okunabilir bir ad eklemek istiyorsanız sr-only kullanılır. CLI çıktısında bu sınıfın position: absolute, 1px genişlik ve yükseklik, clip-path: inset(50%) ve overflow: hidden gibi bir dizi bildirimle elemanı görünmez kıldığını görürsünüz. Resmî display sayfası bunu da anlatır ve sm:not-sr-only gibi bir yazımla etiketi küçük ekranda gizleyip büyük ekranda göstermeyi önerir. Erişilebilirlik tarafının ayrıntıları erişilebilirlik: sr-only ve focus-visible yazısında.

Sık yapılan hatalar

• Sırayı HTML'de aramak: hidden inline-flex yazan eleman görünür kalır, çünkü .inline-flex CSS'te daha sonra gelir.
• Gizlemeyi tersten yazmak: md:hidden block ile hidden md:block farklı şeylerdir; birincisi mobilde gösterip masaüstünde gizler, ikincisi tam tersini yapar.
• contents verilen sarmalayıcıya stil vermek: kutu oluşmadığı için padding, arka plan ve kenarlık görünmez.
• Erişilebilir adı hidden ile gizlemek: ekran okuyucu da okuyamaz; sr-only kullanın.
• Flex veya grid sınıflarını display olmadan yazmak: items-center veya grid-cols-3 yalnızca kapsayıcı flex ya da grid ise etkilidir.

Sık Sorulan Sorular

hidden ile invisible arasındaki fark nedir?

hidden display: none yazar ve eleman yer kaplamaz. invisible visibility: hidden yazar; eleman görünmez ama yeri boş olarak kalır ve komşu elemanlar kaymaz.

Bir öğeyi yalnızca mobilde nasıl gösteririm?

Öğeye md:hidden verin. Mobilde varsayılan display değerini korur, 48rem ve üstünde display: none olur. Bunun tersi için hidden md:block yazın.

Sınıf listesine hidden eklememe rağmen öğe neden görünüyor?

Aynı elemanda inline-flex, inline-block veya grid gibi CSS'te hidden sınıfından sonra üretilen bir display sınıfı varsa o kazanır. Koşula göre ya bir display sınıfı ya hidden yazın ya da HTML'in hidden özniteliğini kullanın.

inline-block ile inline-flex arasındaki fark nedir?

İkisi de satırın içinde akar ve genişlik ile padding kabul eder. Fark içeride başlar: inline-block içindeki öğeleri normal metin akışıyla dizer, inline-flex ise içini bir flex satırına çevirir. İkon ile metni hizalamak, aralarına gap koymak veya öğeleri items-center ile ortalamak istiyorsanız inline-flex seçin; yalnızca padding alan bir rozet için inline-block yeterlidir.

flow-root ne zaman gerekir?

Bir kapsayıcının içindeki çocukların margin değerleri dışarı sızıyor ya da içerideki kayan öğeler kapsayıcının yüksekliğine katılmıyorsa, kapsayıcıya flow-root vermek ona kendi blok biçimlendirme bağlamını kazandırır ve içeriği içine alır. Modern düzenlerde flex veya grid kullanıyorsanız bu sorunla daha seyrek karşılaşırsınız.

display: contents ne işe yarar?

Elemanın kendi kutusunu ortadan kaldırır ve çocuklarını üst elemanın düzenine doğrudan katar. Flex veya grid içinde araya giren bir sarmalayıcıyı düzen açısından görünmez yapmak için kullanılır.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Tailwind öğrenme rehberi · flexbox sınıfları · grid-cols ve grid-rows · responsive tasarım · erişilebilirlik ve sr-only · position ve inset