CSS Podcast - 009: Düzen
Bir geliştirici olarak çalıştığınızı ve bir tasarımcı iş arkadaşınızın size yeni bir web sitesi için bir tasarım verdiğini hayal edin. Tasarım, görüntü alanı genişliği ve yüksekliği dikkate alınan iki boyutlu düzenlerin yanı sıra akıcı ve esnek olması gereken düzenler gibi her türlü ilginç düzene ve kompozisyona sahiptir. Bunları CSS ile biçimlendirmenin en iyi yöntemine nasıl karar verirsiniz?
CSS; yatay eksende, dikey eksende ya da her ikisinde düzen sorunlarını çözmemiz için bize çeşitli yollar sunuyor. Bir bağlam için doğru düzen yöntemini seçmek zor olabilir ve genellikle sorununuzu çözmek için birden fazla düzen yöntemine ihtiyaç duyabilirsiniz. Bu konuda yardımcı olmak için aşağıdaki modüllerde, her bir CSS düzen mekanizmasının bu kararları almanıza yardımcı olacak benzersiz özelliklerini öğreneceksiniz.
Düzen: Kısa bir geçmiş
Web'in ilk günlerinde, basit bir belgeden daha karmaşık tasarımlar <table>
öğeleriyle sunuluyordu.
CSS 90'ların sonlarında tarayıcılar tarafından yaygın bir şekilde benimsendiğinde HTML'yi görsel stillerden ayırmak daha kolay hale geldi.
CSS, HTML'ye hiç dokunmadan bir web sitesinin görünümünü ve tarzını tamamen değiştirebilen geliştiricilere kapı açtı.
Bu yeni özellik, CSS'nin gücünü göstermek ve daha fazla geliştiriciyi öğrenmeye teşvik etmek amacıyla oluşturulan CSS Zen Garden gibi projelere ilham kaynağı oldu.
Web tasarımı ve tarayıcı teknolojisine yönelik ihtiyaçlarımız değiştikçe CSS de gelişti. CSS düzeninin ve düzene yaklaşımımızın zaman içinde nasıl geliştiğini Rachel Andrew'un bu makalesinde okuyabilirsiniz.
Düzen: şimdi ve gelecek
Modern CSS, son derece güçlü düzen araçlarına sahiptir. Düzen için özel sistemlerimiz var. Bir sonraki modüllerde Flexbox ve Grid'i daha ayrıntılı incelemeden önce, elimizdeki imkanlara genel bir göz atacağız.
display
özelliğini anlama
display
özelliğinin iki işlevi vardır.
İlk olarak, uygulandığı kutunun satır içi mi yoksa blok halinde mi çalıştığını belirler.
.my-element {
display: inline;
}
Satır içi öğeler, bir cümledeki kelimeler gibi davranır.
Aynı hizada, yan yana otururlar.
Genellikle <p>
(paragraf) gibi öğeler içeren metin parçalarını biçimlendirmek için kullanılan <span>
ve <strong>
gibi öğeler varsayılan olarak satır içinde yer alır.
Ayrıca, etrafındaki boşlukları da korur.
Satır içi öğelerde açık bir genişlik ve yükseklik ayarlayamazsınız. Blok seviyesindeki kenar boşlukları ve dolgu, etrafındaki öğeler tarafından yoksayılır.
.my-element {
display: block;
}
Blok öğeleri yan yana durmaz. Kendileri için yeni bir satır oluştururlar. Başka bir CSS kodu tarafından değiştirilmediği sürece blok öğesi, satır içi boyutun boyutuna genişler ve dolayısıyla yatay yazma modunda tüm genişliği kapsar. Blok öğesinin tüm yanlarındaki kenar boşluğuna uyulur.
.my-element {
display: flex;
}
display
özelliği, bir öğenin alt öğelerinin nasıl davranması gerektiğini de belirler.
Örneğin, display
özelliği display: flex
olarak ayarlanırsa kutu hem blok düzeyinde bir kutu hem de alt öğelerini esnek öğelere dönüştürür.
Bu da hizalama, sıralama ve akışı kontrol eden esnek özellikleri etkinleştirir.
Flexbox ve Izgara
Birden çok öğe için düzen kuralları oluşturan iki ana düzen mekanizması vardır: flexbox ve grid. Benzerlikleri olsa da farklı düzen sorunlarını çözmek için tasarlanmışlardır.
Flexbox
.my-element {
display: flex;
}
Flexbox, tek boyutlu düzenler için bir düzen mekanizmasıdır. Tek bir eksende yatay veya dikey düzen. Varsayılan olarak flexbox, öğenin alt öğelerini yan yana, satır içi yönde hizalar ve blok yönünde esnetir. Böylece, her öğe aynı yükseklikte olur.
Öğeler, depolama alanı dolduğunda aynı eksende kalır ve kaydırılmaz.
Bunun yerine birbirleriyle aynı çizgiye çarpmaya çalışırlar.
Bu davranış align-items
, justify-content
ve flex-wrap
özellikleri kullanılarak değiştirilebilir.
Flexbox, alt öğeleri de esnek öğelere dönüştürür. Bu işlem, alt öğelerin esnek kapsayıcı içinde nasıl davranacağına ilişkin kurallar yazabileceğiniz anlamına gelir.
Tek bir öğenin hizalamasını, sırasını ve gerekçesini değiştirebilirsiniz.
flex
özelliğini kullanarak küçülme veya büyüme şeklini de değiştirebilirsiniz.
.my-element div {
flex: 1 0 auto;
}
flex
özelliği flex-grow
, flex-shrink
ve flex-basis
kelimesinin kısaltmasıdır.
Yukarıdaki örneği şu şekilde genişletebilirsiniz:
.my-element div {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
}
Geliştiriciler, düzenin içerik ve görüntü alanı boyutları tarafından sorgulandığında nasıl davranması gerektiğini bir tarayıcıya ipucu vermek için bu alt düzey kuralları sağlar. Bu nedenle esnek web tasarımı için çok kullanışlı bir mekanizmadır.
Tablo
.my-element {
display: grid;
}
Izgara, flexbox'a birçok açıdan benzer ancak tek eksenli düzenler (dikey veya yatay alan) yerine çok eksenli düzenleri kontrol etmek için tasarlanmıştır.
Izgara, display: grid
öğesine sahip bir öğede düzen kuralları yazmanıza olanak tanır ve düzen stili için repeat()
ve minmax()
işlevleri gibi birkaç yeni temel öğe sunar.
Yararlı bir ızgara birimi fr
birimidir (kalan alanın kısmıdır). Bu birim, 3 CSS özelliğiyle her öğe arasında boşluk bırakarak geleneksel 12 sütunlu ızgaralar oluşturabilirsiniz:
.my-element {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
Yukarıdaki örnekte tek eksenli bir düzen gösterilmektedir. Flexbox öğeleri çoğunlukla grup olarak değerlendirir. Izgara ise öğelerin iki boyutlu yerleşimi üzerinde hassas kontrol sahibi olmanızı sağlar. Bu tablodaki ilk öğenin 2 satır ve 3 sütun içerdiğini tanımlayabiliriz:
.my-element :first-child {
grid-row: 1/3;
grid-column: 1/4;
}
grid-row
ve grid-column
özellikleri, ızgaradaki ilk öğeye ilk sütundan dördüncü sütunun başlangıcına, ardından ilk satırdan üçüncü satıra kadar yayılacak şekilde talimat verir.
Akış düzeni
Izgara veya flexbox kullanmıyorsanız öğeleriniz normal akışta gösterilir. Normal akışta öğelerin davranışını ve konumunu ayarlamak için kullanabileceğiniz birkaç düzen yöntemi vardır.
Satır içi blok
Çevreleyen öğelerin, satır içi bir öğedeki blok kenar boşluğuna ve dolguya nasıl uymadığı hatırlanır mı?
inline-block
ile bunun gerçekleşmesini sağlayabilirsiniz.
p span {
display: inline-block;
}
inline-block
kullanıldığında blok düzeyindeki bir öğenin bazı özelliklerine sahip olan ancak yine de metinle uyumlu olan bir kutu elde edersiniz.
p span {
margin-top: 0.5rem;
}
Kayanlar
Bir metin paragrafının içinde duran bir resminiz varsa, bir metni gazetede olduğu gibi bu resmin etrafından akıtması kullanışlı olmaz mıydı? Bunu kayan öğeleri kullanarak yapabilirsiniz.
img {
float: left;
margin-right: 1em;
}
float
özelliği, bir öğeye belirtilen yöne "kayma" talimatı verir.
Bu örnekteki görüntüye sola kayma talimatı verilmiştir. Böylece, eşdüzey öğelerin bu resmin etrafına "sarmasına" izin verilir.
Bir öğeye left
, right
veya inherit
değerini kaydırma talimatı verebilirsiniz.
Çok sütunlu düzen
Dünyadaki tüm ülkelerin bulunduğu bir liste gibi gerçekten uzun bir öğe listeniz varsa bu durum, kullanıcının çok kaydırma yapmasına ve zaman kaybetmesine yol açabilir. Sayfada fazla boşluk da oluşmasına neden olabilir. CSS çok sütunlu kullanıldığında bu sorunların ikisine de yardımcı olması için bunu birden çok sütuna bölebilirsiniz.
<h1>All countries</h1>
<ul class="countries">
<li>Argentina</li>
<li>Aland Islands</li>
<li>Albania</li>
<li>Algeria</li>
<li>American Samoa</li>
<li>Andorra</li>
…
</ul>
.countries {
column-count: 2;
column-gap: 1em;
}
Bu işlem, söz konusu uzun listeyi otomatik olarak iki sütuna böler ve iki sütun arasına bir boşluk ekler.
.countries {
width: 100%;
column-width: 260px;
column-gap: 1em;
}
İçeriğin bölündüğü sütun sayısını ayarlamak yerine, column-width
kullanarak istediğiniz minimum genişliği de tanımlayabilirsiniz.
Görüntü alanında daha fazla alan açıldıkça, otomatik olarak daha fazla sütun oluşturulur ve alan azaldıkça sütunlar da azalır.
Bu, duyarlı web tasarımı bağlamlarında çok yararlıdır.
Konumlandırma
Düzen mekanizmalarına genel bir bakışla son olarak, konumlandırma.
position
özelliği, bir öğenin belgenin normal akışında nasıl davranacağını ve diğer öğelerle olan ilişkisini değiştirir.
relative
, absolute
, fixed
ve sticky
seçenekleri sunulur. Varsayılan değer static
şeklindedir.
.my-element {
position: relative;
top: 10px;
}
Bu öğe, kendisine göre konumlandırıldığı için dokümandaki geçerli konumuna göre 10 piksel aşağı sürüklenir.
Bir öğeye position: relative
eklendiğinde o öğe, position: absolute
içeren alt öğelerin kapsayıcı bloğu olur.
Bu, söz konusu öğeye mutlak bir konum uygulandığında, en üstteki göreli üst öğe yerine artık bu belirli öğeye yeniden konumlandırılacağı anlamına gelir.
.my-element {
position: relative;
width: 100px;
height: 100px;
}
.another-element {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
}
position
öğesini absolute
olarak ayarladığınızda öğe, geçerli belge akışından ayrılır.
Bu iki anlama gelir:
top
,right
,bottom
veleft
öğelerini en yakın göreli üst öğesinde kullanarak bu öğeyi istediğiniz yerde konumlandırabilirsiniz.- Mutlak bir öğeyi çevreleyen tüm içerik, söz konusu öğe tarafından kalan alanı doldurmak için yeniden düzenlenir.
position
değeri fixed
olan bir öğe, absolute
ile benzer şekilde davranır ancak üst öğesinin kök <html>
öğesi olur.
Sabit konum öğeleri, ayarladığınız top
, right
, bottom
ve left
değerlerine göre sol üstten sabit kalır.
sticky
kullanarak fixed
ürününün sabit ve sabit yönlerini ve relative
ürününün daha tahmin edilebilir belge akışı görüntüleme özelliklerini elde edebilirsiniz.
Bu değerle, görüntü alanı kaydırarak öğeyi geçerken, ayarladığınız top
, right
, bottom
ve left
değerlerine bağlı kalır.
Özet
CSS düzeninde pek çok seçenek ve esneklik vardır. CSS Flexbox ve Grid'in gücünü daha yakından incelemek için sonraki birkaç modüle geçin.
Öğrendiklerinizi sınayın
Düzen bilginizi test edin
display
özelliğinin işlevi nedir?
inline
veya block
ya da none
değerini belirler.overflow
özelliği.Birden fazla paragrafı sütunlara aktarmak için bu görev için en iyi CSS özelliği hangisidir?
display: grid
column-count
display: flex
float
Bir blokun akışının akması ne anlama gelir?
top
veya left
konum değeri verildi.position: absolute
içeren bir kutu, artık başka kardeş öğelerdeki sırasına göre değil, kapsayıcı bloka göre x ve y koordinatlarıyla konumlandırılır.Flexbox ve Grid, alt öğelerini varsayılan olarak sarmalar mı?
flex-wrap: wrap
veya repeat(auto-fit, 30ch)
ile etkinleştirilmesi gerekir.