Modern bir CSS kart tasarım düzeni oluşturmak için Flexbox nasıl kullanılır?

CSS3'teki yeni bir düzen modu olan Flexbox sayesinde, tüm kartlarımızı tam anlamıyla arka arkaya alabiliriz. Kart tasarımları son birkaç yılda popülaritesini artırdı; Muhtemelen fark ettiğiniz gibi, sosyal medya siteleri gerçekten kartları benimsedi. Pinterest ve Dribbble, bilgi ve görselleri öne çıkarmak için kart düzenlerini kullanır. Materyal Tasarımı ile ilgileniyorsanız, Google'ın kartları desen kitaplıklarında iyi tanımlanmıştır.

Okunabilirlikleri ve ne kadar kaydırılabilir oldukları için kart düzenlerini kişisel olarak seviyorum. Tek seferde göz atması, kaydırması ve taraması kolay bir şekilde mükemmel bilgi "patlaması" sunarlar.

Bir kart düzeni nasıl oluşturulur

Daha önce eşit yükseklikte içerik satırları denediyseniz, bunları oluşturmanın her zaman kolay olmadığını bilirsiniz. Muhtemelen geçmişte işe yaraması için epey uğraşmışsınızdır. Flexbox sayesinde o günler çok geride kaldı. Sağlamanız gereken tarayıcı desteğinin düzeyine bağlı olarak, bazı geri dönüşler eklemeniz gerekebilir, ancak bu özellik için tarayıcı desteği bugünlerde oldukça güvenilirdir. Güvende olmak için, güvenilir Can I use'da Flexbox'ı kontrol ettiğinizden emin olun. Ve unutmayın, canlı sitenizde asla değişiklik yapmamalısınız. Bunun yerine ücretsiz bir yerel WordPress geliştirme uygulaması olan Local ile denemeyi deneyin.

Flexbox'ın temel fikri, bir kapsayıcının görüntüleme özelliğini, içindeki tüm kapların boyutunu "esneten" flex olarak ayarlayabilmenizdir. Eşit yükseklikte sütunlar ve ölçekleme ve daraltma seçenekleri, gelişmiş düzenlerin nasıl oluşturulabileceğini basitleştirecektir. Kartlarla başlamak bir Flexbox hile sayfası gibidir, ancak temel bilgilerde uzmanlaştıktan sonra daha karmaşık düzenler oluşturabilirsiniz.

Flexbox ve çok yönlülük

Kartlar çok yönlüdür, görsel olarak çekicidir ve hem büyük hem de küçük cihazlarda etkileşimi kolaydır; bu, duyarlı tasarım için mükemmeldir. Her kart, kolayca yukarı veya aşağı ölçeklenen bir içerik kabı görevi görür. Ekran boyutları küçüldükçe, sıradaki kart sayısı tipik olarak azalır ve dikey olarak yığılmaya başlarlar. Sabit veya değişken yükseklikte olabildikleri için ek esneklik vardır.

Düzen nasıl oluşturulur

Daha büyük ekranlarda dört yatay kap, orta boyda iki ve küçük cihazlar için tek sütundan oluşan bir sıraya sahip bir Flexbox kart düzeni oluşturacağız.

Aşağıda, dört kartı göstermek için temel bir düzen oluşturmaya yönelik kod parçacığı bulunmaktadır. İç kart içeriğini dahil etmiyorum (kod örneklerinde bu çok uzun sürdüğü için), bu nedenle oraya bir miktar başlangıç ​​içeriği koyduğunuzdan emin olun (ve içerik miktarının dört kart arasında değişmesini sağlayın). Ayrıca, başlamak için burada gösterilen dört karttan oluşan bir satır vardır, ancak birden fazla içerik satırı içeren davranışı görmek istiyorsanız daha fazlası eklenebilir. Tüm kodlar Codepen'de bulunabilir.

Yerleşim tasarımımızı bir ızgara düzeninde görüntülemek için, dışarıdan başlamamız ve kendi yolumuza devam etmemiz gerekecek. Doğru konteynere başvurduğunuzdan emin olmak önemlidir, aksi takdirde işler biraz karışacaktır.

.cards sınıfının olduğu bölüm ilk hedefimiz olacak. Kapsayıcının display özelliği, flex olarak değiştirmemiz gereken şeydir.

İşte başlamak isteyeceğiniz HTML:

<div class="centered">

            <section class="cards">
                
                <article class="card">
                   <p>content for card one</p>
                </article><!-- /card-one -->

 	<article class="card">
                   <p>content for card two</p>
            </article><!-- /card-two -->

<article class="card">
                  <p>content for card three</p>
            </article><!-- /card-three -->

<article class="card">
                   <p>content for card four</p>
            </article><!-- /card-four -->

	</section>
</div>

İşte başlamak için CSS:

.cards {
   display: flex;
   justify-content: space-between;
}

esnek özellik

Çok derine inmeden önce, esnek özelliğin temellerini bilmek iyidir. flex özelliği, aynı kap içindeki diğer esnek öğelere göre öğenin uzunluğunu belirtir. flex özelliği, flex-grow , flex-shrink ve flex-basis özelliklerinin kısaltmasıdır. Varsayılan değer 0 1 auto; . Bence Flexbox'ı tam olarak anlamanın en iyi yolu, farklı değerlerle oynamak ve ne olduğunu görmek.

Bir esnek öğenin esnek flex-grow özelliği, öğenin esnek kap içinde ne kadar yer kaplaması gerektiğini belirtir.

flex-shrink özelliği, öğenin aynı kap içindeki diğer esnek öğelere göre nasıl küçüleceğini belirtir.

flex-basis özelliği, esnek bir öğenin ilk ana boyutunu belirtir. Bu özellik, kutu boyutu kullanılarak aksi belirtilmedikçe, içerik kutusunun boyutunu belirler. Genişlik, genişliğe benzer şekilde içerik tarafından tanımlandığında otomatik varsayılandır width: auto; . Kendi içeriği ile tanımlanan alanı kaplayacaktır. flex-basis: 15em; . Değer 0 ise, öğe boş alanı doldurmak için genişlemeyeceğinden işler oldukça iyi ayarlanmış demektir.

display: flex; ve justify-content: space-between; ve bu noktada işler biraz tahmin edilemez. Şu anda çok açık olmasa da Flexbox kullanılıyor. Bu bildirim ile esnek öğelerin her biri yatay bir sıra halinde yan yana yerleştirilmiştir.

Bunu Codepen'de görün.

Muhtemelen bu esnek öğelerin her birinin neden farklı bir genişliğe sahip olduğunu merak ediyorsunuzdur. Flexbox, bu öğelerin her biri için en küçük varsayılan genişliğin ne olduğunu bulmaya çalışıyor. Ve çeşitli sözcük uzunlukları ve diğer tasarım öğeleri nedeniyle, bu farklı boyuttaki kutular elde edersiniz. Tutarlı bir görünüm elde etmek için biraz daha çalışmamız gerekecek. Bir sargı ayarlamak ve istenen genişliği belirlemek, bunları tek tip kartlara dönüştürmeye yardımcı olacaktır.

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

Varsayılan olarak, esnek öğelerin tümü tek bir satıra sığdırmaya çalışır. flex-wrap: wrap; varsayılan tam genişlik olduğundan öğeleri birbirinin altına sarar.

Bunu Codepen'de görün.

Tam genişlik küçük cihazlar için harikadır, bu yüzden çeşitli kesme noktalarıyla uğraşmadan önce daha büyük ekranımızı planlarken bunu aklımızda tutalım. Genişliği değiştirdiğimizde kartlar daha düzgün görünmeye başlıyor.

Bireysel kartlarımıza stil vermek için şimdi .card sınıfını eklememiz gerekiyor. Bu, .cards stillerinin hemen altına gidebilir.

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.card {
	flex: 0 1 24%;
}

Önceden hatırlayın, flex özelliği stenodur: flex-grow 0, flex-shrink 1 ve width %24'tür. Belirtilen bir genişlik ekleyerek, bu bize aralarında biraz boşluk olan dörtlü bir satır verir.

Bunu Codepen'de görün.

justify-content özelliğini boşluk bırakma amacıyla ayarladık. İlk öğe tam sol görüntüleniyor, ikinci ve üçüncü öğeler ortada görüntüleniyor ve dördüncü öğe tam sağ görüntüleniyor. Kartın genişliği %24 olduğu için, %24'teki dört sütunumuz toplam %100 olmadığı için biraz boşluk kaldı. Kesin olarak %4'ümüz kaldı. Bu %4, her bir öğenin arasına eşit olarak yerleştirilir. Yani kartlar arasında kabaca %1,33 boşluk var.

Bunu Codepen'de görün.

calc kullanarak da daha kesin olabiliriz. Calc kullanmak için flex-basis değeri değiştirmek şuna benzer:

.card {
	flex: 0 1 calc(25% - 1em);
}

Bununla ilgili harika olan şey, tarayıcının alanın %25'ini kapması ve ondan 1em kaldırması, bu da kartları biraz daha küçük hale getiriyor.

Kullanılabilir alanı ayarlamanın kaygan bir yolu. 1em, öğeler arasında eşit olarak dağıtılır ve sonunda mükemmel bir düzen elde ederiz.

Şimdiye kadar, gerçekten yükseklik hakkında pek konuşmadık. Yüksekliğin nasıl çalıştığını göstermek için başka bir sıra kart ekledim. Hangi kartın en fazla içeriğe sahip olduğuna bağlıdır - diğerlerinin yüksekliği takip edecektir. Bu nedenle, her içerik satırı aynı yüksekliğe sahip olacaktır.

Bu çok "uzaklaştırılmış" bir görünümdür, ancak ikinci kartın o satırdaki diğerlerinden daha fazla metin içermesi nedeniyle ilk satırın oldukça uzun olduğunu fark edeceksiniz. İkinci satırda daha az metin var, dolayısıyla genel olarak daha kısa.

Daha küçük cihazlar için kartlar

Şu anda tüm ekranlarda dört sütun var ve bu gerçekten en iyi uygulama değil. Tarayıcı pencerenizi küçültürseniz, dört kartın daha küçük ekranlarda daha fazla ezildiğini ve okunabilirlik için ideal olmadığını göreceksiniz. Neyse ki medya sorgularıyla işler çok daha iyi görünmeye başlayacak.

Sorunu çözmeye başlamak için, belirtilen kesme noktaları, içeriğin tüm farklı ekran türlerinde düzgün görüntülenmesini sağlayacaktır.

Kullanılacak olan aşağıdaki kesme noktaları şunlardır (kendinizi de kullanmaktan çekinmeyin, kavramlar hala geçerlidir):

@media screen and (min-width: 40em) {
    .cards {
   }

    .card {
    }
}

@media screen and (min-width: 60em) {
    .cards {
   }
    
    .card {
     }
}


@media screen and (min-width: 52em) {
    .centered {
       
    }
}

Şimdiye kadar büyük bir düşünceydi. Mobil öncelikli zihniyete girelim ve min-width: 40em kesme noktası ile başlayalım.

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

Bu değişikliklerle, kartlar tam ekran genişliğinde görüntülenecek ve yaklaşık 640 pikselden daha küçük herhangi bir ekranda birbirinin altında istiflenecektir. Tarayıcı penceresini bunun üzerindeki herhangi bir şeye genişletirseniz, dörtlü sütun geri döner. Bu mantıklı çünkü 40em'lik bir min-width var ve burada dört kartlık bir sıra oluşturduk.

Burada eksik olan orta yoldur. Orta seviye için, dört ezilmiş kart yerine arka arkaya iki karta sahip olmak daha okunabilir. İki kart sırasını bulmadan önce, dört kart sırasına sahip olacak en büyük ekranları yerleştirmek için başka bir medya sorgusunun eklenmesi gerekiyor.

@media screen and (min-width: 60em) {
    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

En min-width 60em olan yeni medya sorgusu, dört kartın bildirileceği yerdir. 40em'lik min-width , iki kart sırasının bildirileceği yerdir. Sihir %50 – calc esnek hesap değeriyle gerçekleşiyor.

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(50% - 1em);
    }
}

Bu basit değişiklikle artık işler yolunda gidiyor! Her şeyin doğru göründüğünden emin olmak için tarayıcı penceresini küçültün ve genişletin.

Bunu Codepen'de görün.

Kart sıralarınız doğru görünüyorsa, gitmeye hazırsınız! Bu öğreticiyi deniyorsanız ve son sıranız düzensizse, okumaya devam edin.

Dinamik içerik ve kart aralığının son satırı

Kart sayınıza bağlı olarak, son sıranız aptalca olabilir veya olmayabilir. Tam bir son satır veya sadece bir ekstra kart varsa, sorun olmaz. Bazen içeriğinizi önceden planlamış olursunuz, ancak içerik dinamikse, son kart sırası istediğiniz gibi davranmayabilir. Birden fazla ekstra kart varsa ve gerekçeli içerik ayarlanırsa, aralarındaki boşluğu eşit hale getirir ve yukarıdaki satır(lar)la aynı hizada olmayabilir.

Bu görünümü elde etmek için farklı bir düşünme biçimi gerekir. Bunun o kadar verimli olmadığını iddia ediyorum, ancak nispeten basit.

.cards ve .card stili, bir medya sorgusunun dışında yapıldı:

.cards {
    display: flex;
    flex-wrap: wrap;
 }

.card {
    flex: 1 0 500px;
    box-sizing: border-box;
    margin: 1rem .25em;
}

Medya sorguları, kart sayısının belirlendiği yerdir:

@media screen and (min-width: 40em) {
    .card {
       max-width: calc(50% -  1em);
    }
}

@media screen and (min-width: 60em) {
    .card {
        max-width: calc(25% - 1em);
    }
}

Değiştirilmiş çözümü görmek için Codepen'e bir göz atın.

Umarım bu, başlamanıza yardımcı olacak Flexbox kavramlarına ilişkin temel bir genel bakış sağlar. Flexbox oldukça iyi bir tarayıcı desteğine sahiptir ve web sitesi tasarımlarında kart düzenleri kullanılmaya devam edecektir. Ve unutmayın, kart düzenleri Flexbox'ı nasıl kullanabileceğinizin sadece başlangıcıdır.

Sonraki: WordPress sitelerini daha hızlı tasarlayın

Bu kılavuzda, nasıl daha hızlı çalışacağınız ve WordPress iş akışınızı nasıl hızlandıracağınızla ilgili ipuçlarını ele alacağız. İlk site kurulumundan canlı yayınlamaya kadar, günlük işlerinizden saatlerce çalışmayı nasıl azaltabileceğinizi keşfedin!

Ücretsiz kılavuzu buradan indirin!

Flexbox kullanarak başka neler oluşturdunuz? Projelerinizi yorumlarda paylaşın!