Düzen

CSS Podcast'i - 009: Düzen 'nı inceleyin.

Bir geliştirici olarak çalıştığınızı düşünün, ve bir tasarımcı iş arkadaşınız yepyeni bir web sitesi tasarımını size sunuyor. Tasarımda her türlü ilginç düzen ve kompozisyon bulunmaktadır: görüntü alanının genişliği ve yüksekliğini dikkate alan iki boyutlu düzenler, yanı sıra akıcı ve esnek olması gereken düzenler. Bunları CSS ile biçimlendirmenin en iyi yöntemine nasıl karar verirsiniz?

CSS, düzen sorunlarını çözmemiz için bize çeşitli yollar sunar. veya her ikisinde birden yayınlayabilirsiniz. Bağlam için doğru düzen yöntemini seçmek zor olabilir. ve çoğu zaman sorununuzu çözmek için birden fazla düzen yöntemine ihtiyaç duyabilirsiniz. Size bu konuda yardımcı olmak için aşağıdaki modüllerde: bu kararları desteklemek için her bir CSS düzen mekanizmasının benzersiz özellikleri hakkında bilgi edineceksiniz.

Düzen: Kısa bir geçmiş

Web'in ilk günlerinde, <table> öğeleriyle oluşturulan basit bir belgeye göre daha karmaşık tasarımlar. CSS 90'ların sonunda tarayıcılar tarafından geniş ölçüde benimsendiğinde HTML'yi görsel stillerden ayırmak daha kolay hale geldi. CSS, geliştiricilerin HTML'ye dokunmadan bir web sitesinin görünümünü ve tarzını tamamen değiştirebilmelerini sağladı. Bu yeni olanaklar sayesinde CSS Zen Garden, Bu program, CSS'nin gücünü göstermek ve daha fazla geliştiriciyi öğrenmeye teşvik etmek için oluşturuldu.

Web tasarımı ve tarayıcı teknolojisine olan 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 bu makalede Rachel Andrew tarafından yayınlandı.

Düzen: Bugün ve gelecek

Modern CSS'nin son derece güçlü düzen araçları vardır. Düzen için özel sistemlerimiz var ve elimizdeki ürünlere genel olarak göz atacağız. sonraki modüllerde Flexbox ve Grid'i daha ayrıntılı olarak inceleyeceğiz.

display özelliğini anlama

display özelliği iki şey yapar. İlk olarak, kutunun satır içi mi yoksa engelleme olarak mı uygulanacağını belirler.

.my-element {
  display: inline;
}

Satır içi öğeler, cümlelerdeki kelimeler gibi davranır. Satır içi yönde birbirlerinin yanında duruyorlar. <span> ve <strong> gibi öğeler, genellikle <p> (paragraf) gibi öğeler içeren metin parçalarının stilini belirlemek için kullanılır. varsayılan olarak satır içidir. Ayrıca etrafındaki boşlukları da korur.

Satır içi öğelerde genişlik ve yükseklik ayarlayamazsınız. Blok düzeyindeki kenar boşluğu ve dolgu, etrafındaki öğeler tarafından yoksayılır.

.my-element {
    display: block;
}

Blok öğeler yan yana durmuyor. Kendisi için yeni bir satır oluşturur. Başka CSS kodu tarafından değiştirilmediği sürece, bir engelleme öğesi satır içi boyutun boyutuna genişler, Böylece, yatay yazma modunda tam genişliği kaplarlar. Blok öğesinin tüm kenarları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ğinin display: flex olarak ayarlanması, kutuyu blok düzeyinde kutu haline getirir. ve alt öğelerini esnek öğelere dönüştürür. Bu, hizalamayı, sıralamayı ve akışı kontrol eden esnek özelliklerini 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 vardır ancak farklı düzen sorunlarını çözmek için tasarlanmıştır.

Esnek Kutu

.my-element {
    display: flex;
}

Flexbox, tek boyutlu düzenler için bir düzen mekanizmasıdır. Yatay veya dikey olarak tek bir eksen üzerinde düzen. Esnek kutu, varsayılan olarak öğenin alt öğelerini yan yana hizalar ve satır içi yönde, aynı yükseklikte olacak şekilde blok yönünde uzatın.

Öğeler aynı eksende kalır ve alanı tükendiğinde sarmalanmaz. Bunun yerine, birbirleriyle aynı çizgide ilerlemeye çalışırlar. Bu çalışma biçimi align-items, justify-content ve flex-wrap özellikleri kullanılarak değiştirilebilir.

Flexbox ayrıca alt öğeleri esnek öğelere dönüştürür. Bu, esnek bir kapsayıcı içinde nasıl davrandıklarına ilişkin kurallar yazabileceğiniz anlamına gelir. Tek bir öğede hizalama, sıra ve gerekçeyi değiştirebilirsiniz. flex özelliğini kullanarak daralma veya büyüme şeklini değiştirebilirsiniz.

.my-element div {
    flex: 1 0 auto;
}

flex özelliği flex-grow, flex-shrink ve flex-basis için kullanılan bir kısaltmadır. Yukarıdaki örneği şu şekilde genişletebilirsiniz:

.my-element div {
 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;
}

Geliştiriciler, tarayıcıya düzenin nasıl davranması gerektiği konusunda ipucu vermek için bu alt düzey kuralları sağlar. boyut ve görüntü alanı boyutlarıyla zorlandığında. Bu da onu duyarlı web tasarımı için çok kullanışlı bir mekanizma haline getirir.

Izgara

.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 edecek şekilde tasarlanmıştır.

Izgara, display: grid içeren bir öğede düzen kuralları yazmanıza olanak tanır. ve düzen stili için birkaç yeni temel öğe tanıttık. repeat() ve minmax() işlevleri gibi. Kullanışlı bir ızgara birimi, kalan alanın oranı olan fr birimidir. Geleneksel 12 sütunlu ızgaralar oluşturabilirsiniz. 3 CSS özelliği olmak üzere her öğe arasında bir boşluk bırakılmalıdır:

.my-element {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

Yukarıdaki örnekte tek eksenli bir düzen gösterilmektedir. Flexbox'ın öğeleri çoğunlukla bir grup olarak ele aldığı ızgarası, yerleşim üzerinde iki boyutlu hassas kontrol olanağı sunar. Bu tablodaki ilk öğenin 2 satır ve 3 sütun kullandığını tanımlayabiliriz:

.my-element :first-child {
  grid-row: 1/3;
  grid-column: 1/4;
}

grid-row ve grid-column özellikleri, ızgaradaki ilk öğeye dördüncü sütunun başlangıcına kadar uzanmasını bildirir. sütun, ardından ilk satırdan üçüncü satıra geçiş yapın.

Akış düzeni

Izgara veya flexbox kullanmıyorsanız öğeleriniz normal akışta görüntülenir. Öğelerin normal akışdayken 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 öğedeki blok kenar boşluğuna ve dolguya nasıl uymadığını hatırlıyor musunuz? inline-block ile bunun gerçekleşmesine uyabilirsiniz.

p span {
    display: inline-block;
}

inline-block kullandığınızda, blok düzeyindeki öğelerin bazı özelliklerine sahip bir kutu elde edersiniz. metinle aynı hizada akmaya devam eder.

p span {
    margin-top: 0.5rem;
}

Kayanlar

Bir metin paragrafında yer alan bir resminiz varsa Bu metnin, resmin bir gazetede olduğu gibi etrafına sarmalanması kullanışlı olmaz mıydı? Bunu kayan içeriklerle yapabilirsiniz.

img {
    float: left;
    margin-right: 1em;
}

float özelliği, bir öğeye "kayan" komutu verir belirtilen yöne doğru gider. Bu örnekteki resimde sola kayma talimatı verilmiştir Böylece eşdüzey öğelerin "sarmalanması"na izin verilir. etrafa takıldı. Bir öğeye left, right veya inherit değerini kaydırma talimatı verebilirsiniz.

Çok sütunlu düzen

Öğe listeniz gerçekten uzunsa örneğin dünyadaki tüm ülkelerin bir listesi, kullanıcılar için çok kaydırma ve zaman kaybına neden olabilir. Ayrıca, sayfada fazla boşluk oluşturabilir. CSS çok sütunlu kullanıldığında her iki sorunda da yardımcı olması için sütunu birden fazla 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, 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üneceği sütun sayısını ayarlamak yerine, ayrıca column-width öğesini 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 küçüldükçe, sayısı da azalır. Bu, duyarlı web tasarımı bağlamlarında çok yararlıdır.

Konumlandırma

Son olarak, düzen mekanizmalarına genel bir bakışla ele alacağımız konular, konumlandırmadır. position özelliği, bir öğenin dokümanın normal akışındaki davranışını değiştirir. ve diğer öğelerle nasıl ilişkili olduğunu anlamanızı sağlar. relative, absolute, fixed ve sticky kullanılabilir. Varsayılan değer static.

.my-element {
  position: relative;
  top: 10px;
}

Bu öğe, dokümandaki mevcut konumuna göre 10 piksel aşağı sürüklenir. yerleştirilmiş olarak ayarlayabilirsiniz. Bir öğeye position: relative eklendiğinde, aynı zamanda onu position: absolute içeren tüm alt öğelerin kapsayıcı bloğu haline gelir. Bu, alt öğesinin artık bu belirli öğeye yeniden konumlandırılacağı anlamına gelir. mutlak bir konuma uygulandığında, en üstteki göreli üst öğe yerine.

.my-element {
  position: relative;
  width: 100px;
  height: 100px;
}

.another-element {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
}

position değerini absolute olarak ayarladığınızda, öğeyi mevcut belge akışından çıkarır. Bu durum iki anlama gelir:

1. Bu öğeyi, en yakın göreli üst öğesinde top, right, bottom ve left kullanarak istediğiniz yere konumlandırabilirsiniz.
2. Mutlak bir öğenin etrafındaki tüm içerik, bu öğenin kalan alanı doldurmak için yeniden düzenlenir.

position değeri fixed olan bir öğe, absolute ile benzer şekilde davranır. üst öğesi 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.

Sabit, ölçülebilir, sticky kullanarak fixed öğesinin sabit özelliklerini ve relative ürününün daha tahmin edilebilir belge akışını gözeten özelliklerini test edin. Bu değerle, görüntü alanı öğenin dışına kaydırıldıkça belirlediğiniz top, right, bottom ve left değerlerine bağlı kalır.

Özet

CSS düzeniyle ilgili çok fazla seçenek ve esneklik vardır. CSS Flexbox ve Grid'in gücünü daha yakından tanımak için sonraki birkaç modülle devam edin.

Öğrendiklerinizi sınayın

Düzen bilginizi test edin