CSS'de Şeyler Nasıl Hizalanır?

Bugün CSS'de bir şeyleri hizalamak için çok çeşitli yollara sahibiz ve hangisinin kullanılacağı her zaman açık bir karar değildir. Bununla birlikte, neyin mevcut olduğunu bilmek, belirli bir hizalama sorunuyla karşılaşırsanız her zaman birkaç taktik deneyebileceğiniz anlamına gelir.

Bu yazıda, farklı hizalama yöntemlerine bir göz atacağım. Her biri için kapsamlı bir kılavuz sağlamak yerine, insanların sahip olduğu bazı yapışkan noktaları açıklayacağım ve özellikler ve değerler için daha eksiksiz referanslara işaret edeceğim. CSS'nin çoğunda olduğu gibi, yöntemlerin nasıl davrandığına ilişkin temel şeyleri anlayarak uzun bir yol kat edebilir ve ardından istediğiniz kesin düzeni nasıl elde ettiğinizle ilgili daha ince ayrıntıları aramak için bir yere ihtiyaç duyabilirsiniz.

Metni ve Satır İçi Öğeleri Hizalama

Bir sayfada bazı metinler ve diğer satır içi öğelerimiz olduğunda, her içerik satırı bir satır kutusu olarak kabul edilir. text-align özelliği, örneğin metninizin ortalanmasını veya iki yana yaslanmasını istiyorsanız, bu içeriği sayfada hizalayacaktır. Ancak bazen, örneğin metnin yanında görüntülenen bir simgeniz varsa veya farklı boyutlarda metin varsa, bu satır kutusunun içindeki şeyleri başka şeylere göre hizalamak isteyebilirsiniz.

Aşağıdaki örnekte, daha büyük satır içi resme sahip bir metnim var. Metni görüntünün ortasına hizalamak için görüntüde vertical-align: middle kullanıyorum.

line-height Özellik ve Hizalama

line-height özelliğinin satır kutusunun boyutunu değiştireceğini ve dolayısıyla hizalamanızı değiştirebileceğini unutmayın. Aşağıdaki örnek, 150 piksellik büyük bir satır yüksekliği değeri kullanır ve görüntüyü top olarak hizaladım. Resim, metnin üst kısmına değil, satır kutusunun üstüne hizalanır, bu satır yüksekliğini kaldırın veya resmin boyutundan daha küçük yapın; resim ve metin, metnin üstünde hizalanır.

line-height ve aslında metnin boyutunun oldukça karmaşık olduğu ortaya çıktı ve bu makalede o tavşan deliğinden aşağı inmeyeceğim. Satır içi öğeleri tam olarak hizalamaya çalışıyorsanız ve neler olup bittiğini gerçekten anlamak istiyorsanız, "Derin Dalış CSS: Yazı Tipi Metrikleri, line-height ve vertical-align " bölümünü okumanızı öneririm.

vertical-align Özelliğini Ne Zaman Kullanabilirim?

vertical-align özelliği, herhangi bir satır içi öğeyi hizalıyorsanız kullanışlıdır. Bu, display: inline-block içeren öğeleri içerir. Tablo hücrelerinin içeriği, vertical-align özelliğiyle de hizalanabilir.

vertical-align özelliğinin esnek veya ızgara öğeleri üzerinde hiçbir etkisi yoktur ve bu nedenle, bir geri dönüş stratejisinin parçası olarak kullanılırsa, ana öğe bir ızgaraya veya esnek Kapsayıcıya dönüştürüldüğü anda uygulanmaya son verir. Örneğin, bir sonraki kalemde, display: inline-block ile düzenlenmiş bir dizi öğem var ve bu, tarayıcıda Flexbox olmasa bile öğeleri hizalama yeteneğine sahip olduğum anlamına geliyor:

Bu sonraki kalemde, inline-block Flex düzeni için bir geri dönüş olarak ele aldım. Hizalama özellikleri artık geçerli değil ve öğeleri Flexbox'ta hizalamak için hizalama align-items ekleyebilirim. display: inline-block kullanırken alacağınız öğeler arasındaki boşluk ortadan kalktığı için Flexbox yönteminin devrede olduğunu söyleyebilirsiniz.

vertical-align tablo hücrelerinde çalışması gerçeği, display: table-cell kullanarak bir öğeyi dikey olarak ortalamanın püf noktasının nedenidir.

Artık CSS'de kutuları hizalamanın daha iyi yollarına sahip olduğumuza göre (bir sonraki bölümde inceleyeceğimiz gibi), satır içi ve metin öğeleri dışındaki yerlerde vertical-align ve text-align özelliklerini kullanmamıza gerek yok. ki onlar tasarlandı. Bununla birlikte, bu metin ve satır içi biçimlerde kullanım için hala tamamen geçerlidirler ve bu nedenle, satır içi bir şeyi hizalamaya çalışıyorsanız, erişmeniz gereken Kutu Hizalama özellikleri değil, bu özelliklerdir.

Kutu Hizalama

Kutu Hizalama Spesifikasyonu, diğer her şeyi nasıl hizaladığımızla ilgilenir. Spesifikasyon, aşağıdaki hizalama özelliklerini detaylandırır:

• justify-content
• align-content
• justify-self
• align-self
• justify-items
• align-items

Bu özellikleri zaten Flexbox Spesifikasyonunun veya belki de Grid'in bir parçası olarak düşünebilirsiniz. Özelliklerin geçmişi, Flexbox'ın bir parçası olarak ortaya çıktıkları ve Düzey 1 belirtiminde hala var olmalarıdır; ancak, daha genel olarak faydalı oldukları anlaşıldığında kendi özelliklerine taşındılar. Artık bunları Grid Layout'ta da kullanıyoruz ve mevcut tarayıcı desteği onları henüz kullanamayacağınız anlamına gelse de, diğer düzen yöntemleri için de belirtilmiştir.

Bu nedenle, İnternet'te bir dahaki sefere birisi size dikey hizalamanın CSS'nin en zor kısmı olduğunu söylediğinde, onlara şunu söyleyebilirsiniz (ki bu bir tweet'e bile sığar):

 .container { display: flex; align-items: center; justify-content: center; }

Gelecekte, Block Layout için Box Alignment özellikleri uygulandığında display: flex bile vazgeçebiliriz. Ancak şu anda, istediğiniz şeyin ebeveynini esnek bir kapsayıcıya ortalamak, yatay ve dikey olarak hizalama elde etmenin yoludur.

İki Tip Hizalama

Esnek ve ızgara öğelerini hizalarken, hizalamanız gereken iki olası şey vardır:

1. Izgarada veya esnek kapta boş alana sahipsiniz (öğeler veya raylar yerleştirildikten sonra).
2. Ayrıca öğenin kendisi, yerleştirdiğiniz ızgara alanının içinde veya esnek kabın içindeki çapraz eksende bulunur.

Yukarıda size bir dizi özellik gösterdim ve hizalama özellikleri iki grup olarak düşünülebilir. Boş alan dağıtımıyla ilgilenenler ve öğenin kendisini hizalayanlar.

Boş Alanla Başa Çıkmak: align-content ve justify-content

-content ile biten özellikler boşluk dağıtımı ile ilgilidir, bu nedenle align-content veya justify-content içerik kullanmayı seçtiğinizde kullanılabilir alanı ızgara izleri veya esnek öğeler arasında dağıtırsınız. Esnek veya ızgara öğelerinin boyutunu kendileri değiştirmezler; onları hareket ettirirler çünkü boş alanın nereye gittiğini değiştirirler.

Aşağıda esnek bir örneğim ve bir ızgara örneğim var. Her ikisinin de esnek öğeleri veya ızgara izlerini görüntülemek için gerekenden daha büyük bir kabı vardır, bu nedenle bu alanı dağıtmak için align-content ve justify-content kullanabilirim.

Öğeleri Etrafta Taşıma: justify-self , kendini align-self , justify-items Ve align-items

Daha sonra, bireysel esnek veya ızgara öğelerine uygulandığı gibi, align-self justify-self çıkar; tüm özellikleri bir kerede ayarlamak için kaptaki align-items ve justify-items öğelerini de kullanabilirsiniz. Bu özellikler, gerçek esnek veya ızgara öğesiyle ilgilenir, yani içeriği Izgara Alanı veya esnek çizgi içinde hareket ettirir.

• Izgara Düzeni
  Öğeyi blokta ve satır içi eksende kaydırabildiğiniz için, içinde bulunduğu tanımlanmış bir Izgara Alanına sahip olduğumuz için her iki özelliği de elde edersiniz.
• Esnek Düzen
  Ana eksen yalnızca boşluk dağılımı tarafından kontrol edildiğinden, yalnızca çapraz eksende hizalayabilirsiniz. Bu nedenle, öğeleriniz bir satırsa, bunları esnek çizgi içinde yukarı ve aşağı kaydırarak birbirine hizalamak için align-self kullanabilirsiniz.

Aşağıdaki örneğimde, bir esnek ve bir ızgara kabım var ve öğeleri çapraz eksende yukarı ve aşağı hareket ettirmek için Flexbox'ta hizalama align-items ve align-self kullanıyorum. Firefox kullanıyorsanız ve öğeyi Firefox Flexbox Inspector kullanarak incelerseniz, esnek kapsayıcının boyutunu ve öğelerin bunun içinde dikey olarak nasıl taşındığını görebilirsiniz.

Izgarada, öğeleri ızgara alanlarının içinde hareket ettirmek için dört özelliği de kullanabilirim. Bir kez daha, Firefox DevTools Grid Inspector, hizalama ile oynarken faydalı olacaktır. Üst üste bindirilmiş ızgara çizgileri ile içeriğin taşındığı alanı görebilirsiniz:

İçeriği her bir düzen yönteminde nasıl değiştirebileceğinizi görmek için CodePen demosundaki değerlerle oynayın:

align ve justify çıkararak kafam karıştı

Grid ve Flexbox'taki hizalama özelliklerini hatırlayan kişilerle ilgili belirtilen sorunlardan biri, hiç kimsenin hizalamayı veya doğrulamayı hatırlayamamasıdır. Hangi yön hangisi?

Izgara Düzeni için Blok veya Satır İçi Yönde hizalama yapıp yapmadığınızı bilmeniz gerekir. Blok yönü, sayfanızda (yazma modunuzda) düzenlenmiş yön bloklarıdır, yani İngilizce için dikeydir. Satır içi yön, cümlelerin çalıştığı yöndür (yani İngilizce için yatay olarak soldan sağa).

Nesneleri Blok Yönünde hizalamak için, align- ile başlayan özellikleri kullanacaksınız. Izgara kapsayıcısında boş alan varsa ızgara izleri arasında alanı dağıtmak için align-content hizala ve bir öğeyi yerleştirildiği ızgara alanı içinde hareket ettirmek için align-items hizala veya align-self .

Aşağıdaki örnekte iki ızgara düzeni vardır. Birinde writing-mode: horizontal-tb (İngilizce için varsayılandır) ve diğerinde writing-mode: vertical-rl vardır. Aralarındaki tek fark bu. Uyguladığım hizalama özelliklerinin her iki modda da blok ekseninde tam olarak aynı şekilde çalıştığını görebilirsiniz.

Şeyleri satır içi yönde hizalamak için, justify- ile başlayan özellikleri kullanın. Izgara izleri arasında boşluk dağıtmak için justify-content ve ızgara alanı içindeki öğeleri satır içi yönde hizalamak için justify-items veya justify-self kullanın.

Bir kez daha, iki kılavuz düzeni örneğim var, böylece hangi yazma modunu kullanırsanız kullanın, satır içinin her zaman satır içi olduğunu görebilirsiniz.

Flexbox, row veya column olarak değiştirilebilen bir ana eksene sahip olduğumuz için biraz daha aldatıcıdır. Öyleyse, önce bu ana ekseni düşünelim. flex-direction özelliği ile ayarlanır. Bu özelliğin ilk (veya varsayılan) değeri, şu anda kullanımda olan yazma modunda esnek öğeleri bir row olarak yerleştirecek olan satırdır - bu nedenle İngilizce çalışırken, bir oluştururken yatay olarak yerleştirilmiş öğelerle sonuçlanırız. esnek konteyner. Daha sonra ana ekseni flex-direction: column olarak değiştirebilirsiniz ve öğeler bir sütun olarak düzenlenir, bu da o yazma modu için blok yönünde yerleştirildikleri anlamına gelir.

Bu eksen geçişini yapabildiğimiz için Flexbox'ta en önemli faktör “Ana eksenim hangi eksen?” diye sormaktır. Bunu öğrendikten sonra, hizalama için (ana ekseninizdeyken) sadece justify-content kullanırsınız. Ana ekseninizin satır veya sütun olması fark etmez. justify-content ile esnek öğeler arasındaki boşluğu kontrol edersiniz.

Çapraz eksende, esnek kap içindeki öğeleri veya çok satırlı esnek kaptaki esnek çizgiyi hizalayacak hizalama align-items kullanabilirsiniz. flex-wrap: wrap kullanan çok satırlı bir kabınız varsa ve bu kapta boşluk varsa, alanı çapraz eksende dağıtmak için align-content kullanabilirsiniz.

Aşağıdaki örnekte, hem satır hem de sütun olarak görüntülenen esnek bir kap ile yapıyoruz:

justify-content veya align-content Çalışmadığında

Grid ve Flexbox'taki justify-content ve align-content özellikleri, fazladan alan dağıtmakla ilgilidir. Yani kontrol edilmesi gereken şey, fazladan alana sahip olmanızdır.

İşte bir Flex örneği: flex-direction: row öğesini ayarladım ve üç öğem var. Esnek kaptaki tüm alanı kaplamazlar, bu nedenle ana eksende boş alanım var, justify-content için başlangıç ​​değeri flex-start ​​ve bu nedenle öğelerimin tümü başlangıçta ve fazladan boşlukta sıralanıyor sonundadır. Alanı vurgulamak için Firefox Flex Inspector kullanıyorum.

Esnek yönü space-between değiştirirsem, bu fazladan boşluk artık öğeler arasında dağıtılır:

Artık öğelerime daha fazla içerik eklersem, böylece daha büyük olurlar ve artık ek alan kalmazsa, justify-content hiçbir şey yapmaz - çünkü dağıtılacak alan yoktur.

Bana sorulan yaygın bir soru, flex-direction column olduğunda justify-content neden çalışmadığıdır. Bunun nedeni genellikle dağıtılacak alan olmamasıdır. Yukarıdaki örneği alır ve bunu flex-direction: column yaparsanız, öğeler bir sütun olarak görüntülenir, ancak flex-direction: row yaptığınızda olduğu gibi öğelerin altında ek boşluk olmaz. Bunun nedeni, display: flex ile bir Flex Kapsayıcı yaptığınızda, blok düzeyinde bir esnek kapsayıcıya sahip olmanızdır; bu satır içi yönde mümkün olan tüm alanı kaplayacaktır. CSS'de işler blok yönünde esnemez, bu nedenle fazladan boşluk olmaz.

Kapsayıcıya bir yükseklik ekleyin ve - öğeleri görüntülemek için gerekenden daha fazla olduğu sürece - fazladan alanınız olur ve bu nedenle justify-content sütununuzda çalışır.

Flexbox'ta Neden justify-self Doğrulama Yok?

Grid Layout her iki eksen için de tüm özellikleri uygular çünkü Grid Layout'ta her zaman iki eksenle ilgileniriz. İzler oluştururuz (bu, her iki boyutta da ızgara kapsayıcısında ek boşluk bırakabilir) ve böylece bu alanı align-content veya justify-content ile dağıtabiliriz. Ayrıca Izgara Alanlarımız da var ve bu alandaki öğe alanın tüm alanını kaplamayabilir, bu nedenle içeriği alanın etrafında hareket ettirmek için align-self veya justify-self kullanabiliriz (veya align-items , justify-items tüm öğelerin hizalamasını değiştirmek için).

Flexbox, Izgara düzeninin yaptığı gibi izlere sahip değildir. Ana eksende, oynamamız gereken tek şey öğeler arasındaki boşluk dağılımıdır. Esnek bir öğenin yerleştirildiği bir parça kavramı yoktur. Yani nesnenin içinde hareket ettirileceği bir alan oluşturulmamıştır. Bu nedenle Flexbox'ta ana eksenlerde yaslama justify-self özelliği yoktur.

Ancak bazen, bir öğeyi veya öğe grubunun bir kısmını farklı bir şekilde hizalayabilmek istersiniz. Ortak bir kalıp, bir öğenin gruptan ayrıldığı bölünmüş bir gezinme çubuğu olacaktır. Bu durumda, belirtim otomatik kenar boşluklarının kullanılmasını önerir.

Otomatik kenar boşluğu, uygulandığı yöndeki tüm alanı kaplayacaktır, bu nedenle bir bloğu (ana sayfa düzenimiz gibi) sol ve sağ kenar boşluğunu kullanarak ortalayabiliriz. Her iki tarafta bir otomatik kenar boşluğu ile, her kenar boşluğu tüm alanı kaplamaya çalışır ve böylece bloğu ortaya doğru iter. Esnek öğeler satırımızla, bölmenin gerçekleşmesini istediğimiz öğeye margin-left: auto ekleyebiliriz ve esnek kapta boş alan olduğu sürece bir bölme elde edersiniz. Bu, Flexbox ile güzel bir şekilde oynanır, çünkü boş alan kalmaz, öğeler normal esnek öğeler gibi davranır.

Flexbox ve Mikro Bileşenler

Sıklıkla gözden kaçırıldığını düşündüğüm şeylerden biri, Flexbox'ın küçük yerleşim işleri yapmak için ne kadar yararlı olduğudur, burada vertical-align kullanmanın gidilecek yol olduğunu düşünebilirsiniz. Küçük desenlerin düzgün hizalanmasını sağlamak için genellikle Flexbox'ı kullanırım; örneğin, metnin yanına bir simgeyi hizalamak, iki şeyi farklı yazı tipi boyutlarıyla hizalamak veya form alanlarını ve düğmeleri düzgün şekilde hizalamak. vertical-align ile güzel bir şekilde hizalanacak bir şey elde etmekte zorlanıyorsanız, belki işi Flexbox ile yapmayı deneyin. Ayrıca display: inline-flex ile isterseniz bir satır içi esnek kap oluşturabileceğinizi unutmayın.

Küçük yerleşim işleri için Flexbox ve hatta Grid kullanmamak için hiçbir neden yoktur. Sadece büyük yerleşim parçaları için değiller. Kullanabileceğiniz farklı şeyleri deneyin ve neyin en iyi sonucu verdiğini görün.

İnsanlar genellikle bir şeyleri yapmanın doğru ya da yanlış yolunun ne olduğunu bilmek konusunda çok isteklidirler. Gerçekte, genellikle doğru ya da yanlış yoktur; deseninizdeki küçük bir fark, Flexbox'ın en iyi çalışması arasındaki fark anlamına gelebilir, aksi takdirde vertical-align kullanırsınız.

Toplama

Bitirmek için, hizalamanın temellerinin hızlı bir özetine sahibim. Bu birkaç kuralı hatırlıyorsanız, çoğu şeyi CSS ile uyumlu hale getirebilmelisiniz:

1. Metni mi yoksa satır içi bir öğeyi mi hizalıyorsunuz? Öyleyse, text-align , vertical-align ve line-height kullanmanız gerekir.
2. Sayfanın veya kapsayıcının ortasına hizalamak istediğiniz bir öğeniz veya öğeleriniz mi var? Öyleyse, kabı esnek bir kap yapın, ardından align-items: center ve justify-content: center .
3. Izgara Düzenleri için align- ile başlayan özellikler Blok yönünde; justify- ile başlayanlar satır içi yönde çalışır.
4. Esnek Düzenler için, align- ile başlayan özellikler Çapraz Eksen üzerinde çalışır; justify- ile başlayanlar ana eksende çalışır.
5. justify-content ve align-content özellikleri fazladan alan dağıtır. Esnek veya ızgara kapsayıcınızda fazladan alanınız yoksa hiçbir şey yapmazlar.
6. Flexbox'ta justify-self ihtiyacınız olduğunu düşünüyorsanız, otomatik kenar boşluğu kullanmak muhtemelen size peşinde olduğunuz kalıbı verecektir.
7. Küçük yerleşim işleri ve ana bileşenler için hizalama özellikleriyle birlikte Grid ve Flexbox'ı kullanabilirsiniz - deneme!

Hizalama hakkında daha fazla bilgi için şu kaynaklara bakın:

• CSS Kutusu Hizalaması (MDN web belgeleri)
• Flexbox'ta Hizalama Hakkında Bilmeniz Gereken Her Şey
• Kutu Hizalama Hile Sayfası