Web tasarımcısının Flexbox kılavuzu

Kullanmaya başladınız mı Esnek Kutu Düzeni modülü henüz projelerinizde? Modül bir süredir ortalıkta olsa da, ön uç geliştiricilerin onu bir modül olarak kullanmasını engelleyen iki büyük engel vardı. web tasarım aracı .

Birincisi, yakın zamana kadar teknik özellikler değişkendi ve bunun için büyük bir destek yoktu. Bugün, tüm modern tarayıcılar Flexbox'ı desteklemektedir. İkinci engel ise Flexbox konseptini kavramanın oldukça zor olmasıdır. Süper güçlü olmasına rağmen, çok sayıda hareketli parça vardır ve öğrenmesi zor olabilir. Ancak, sayfa öğelerini düzenleme ve bunların birden çok ekran boyutunda öngörülebilir bir şekilde davranmasını sağlama yeteneği, çabaya değer.

Web tasarımcısı



Flexbox ile başlamak ister misiniz? Okumaya devam etmek!

Bu yazıda, flexbox'ın arkasındaki temel kavramlarla sizi harekete geçireceğim. Bu temel kavramları anlamak, son derece esnek, oluşturulması kolay düzenlerden oluşan bütün bir dünyanın kapılarını açacaktır (özellikle duyarlı web tasarımı ).

Yeni nesil tasarım

Flexbox, CSS ile düzenler oluşturmanıza yardımcı olacak yeni nesil bir araçtır; Web sitenizin bir bölümünü düzenlemek veya medya öğeleri ızgarasını görüntülemek isteyip istemediğiniz. Kötü CSS saldırılarına veya kırılgan JavaScript bağımlılıklarına başvurmak zorunda kalmadan sayfanızdaki öğeleri kolayca hizalamanızı, ortalamanızı, yaslamanızı, ölçeklendirmenizi ve yeniden sıralamanızı sağlar.

Flexbox, kayan noktaların, konumlandırma hilelerinin, satır içi blok düzenlerinin ve hatta - titreyen - tablo görüntüleme düzenlerinin yerini alabilir. CSS'de görünüşte basit olan bazı düzenlerin neden zor ve hatta imkansız olduğunu merak ederek saçınızı çıkardıysanız, Flexbox'ı seveceksiniz.

Esnek öğeler

Flexbox'ın büyüsü, ana 'esnek kapsayıcı' ile alt 'esnek öğeler' arasındaki ilişkide yatar. Flexbox'ın tam kontrolünü ele almak için, önceki kayma, konumlandırma ve temizleme fikirlerini bir kenara bırakmalısınız. Bu, sayfanızı düzenlemenin tamamen yeni bir yoludur.

Ayar ekran: esnek; bir üst öğe, onu esnek bir kaba dönüştürür ve tüm alt öğeleri esnek öğelere dönüştürülür. Biçimlendirme ayarınızı yaptıktan sonra, bir düzen oluşturmak için mevcut birçok esnek özellikten birini kullanabilirsiniz.

Not: HTML öğelerinden herhangi biri esnek bir kap veya esnek bir öğe olabilir. Hiç :önce ve :sonra flex konteynırınızda sahip olduğunuz sözde öğeler çocuk olarak değerlendirilecektir ve bu nedenle birinci sınıf esnek öğeler.

tatil yazı tipi zaten microsoft word'de

Satırlar ve sütunlar

Varsayılan esnek yönü satır olarak ayarlandı

Varsayılan esnek yönü satır olarak ayarlandı

Flexbox'ta, sayfadaki esnek öğelerin nasıl yerleştirildiğini kontrol eden iki eksen vardır: ana eksen ve çapraz eksen. Varsayılan olarak, Flexbox, ana eksen soldan sağa (veya sağdan sola okuyan diller için tersi) ve çapraz eksen yukarıdan aşağıya (yukarıda gösterilmiştir) olacak şekilde ayarlanmıştır. Bunu ezberlemeye başlamadan önce, unutmayın ki, tüm bunlar esnek yön Emlak.

Ana eksen esnek yönle çevrildi: satır-ters;

Ana eksen esnek yönle çevrildi: satır-ters;

Varsayılan olarak Flexbox, esnek yönü: sıra; Bu, öğelerin ana eksende soldan sağa arka arkaya aktığı anlamına gelir. Ana ekseni kullanarak sağdan sola akması için değiştirebiliriz esnek yön: sıra ters (Yukarıda gösterildiği gibi).

Şekil 3: Ana eksen esnek yön: kolon ile yataydan dikeye değiştirildi;

Ana eksen flex-direction: column ile yataydan dikeye geçti;

Hem ana ekseni hem de çapraz ekseni değiştirmek için düzeni şu şekilde değiştiririz: esnek yön: sütun; . Bu, ana ekseni değiştirecek ve bir sütunda (yukarıda) soldan sağa yukarıdan aşağıya öğe akışını esnetecektir. Aşağıdan başlayabilir ve ana ekseni çevirerek yukarı hareket edebiliriz. esnek yönü: sütun tersi .

Merkez öğeleri

Flexbox ile ilgili en iyi şeylerden biri, içeriğinizi istediğiniz şekilde hizalamanıza izin vermesidir - dikey merkezleme bile mutlak bir esinti! Flexbox hizalamasını çevreleyen genellikle kafa karışıklığı vardır, çünkü flex öğelerimizin hizalamasını değiştirmek için kullandığımız üç farklı özellik vardır.

Bunun bir nedeni, bu özelliklerin öğeleri ana ve çapraz eksen boyunca hizalamasıdır. Öyleyse, 'Bir şeyi dikey veya yatay olarak nasıl ortalayabilirim?' Önce eksenlerinizin hangi yöne dönük olduğunu belirlemeniz ve ardından flex öğelerinizi bunlar üzerinde düzgün şekilde hizalamak ve ortalamak için hangi CSS özelliğinin kullanılacağını belirlemeniz gerekir.

Sonraki birkaç örnekte, öğelerimi mükemmel bir şekilde ortalamaya çalışacağım. Ancak, bu özelliklerin her birinin bir dizi hizalama seçeneğine sahip olduğunu bilmelisiniz. Tam liste için bu CSS-Tricks flexbox referansı kullanışlı.

Çapraz eksen

Şekil 4: öğeleri hizala: merkez; öğelerimizi, bizim durumumuzda yukarıdan aşağıya olan çapraz eksen boyunca ortalayacaktır.

hizalama öğeleri: merkez; öğelerimizi, bizim durumumuzda yukarıdan aşağıya olan çapraz eksen boyunca ortalayacaktır.

Varsayılan olarak, esnek öğeler çapraz eksen boyunca esnek kabın tamamı boyunca uzanır. Öğeleri çapraz eksen boyunca ortalamak istiyorsak, hizalama öğeleri esnek kapsayıcımızdaki mülk ve merkez (Yukarıda verilen).

Ek olarak Uzatmak ve merkez biz de kullanabiliriz esnek başlangıç ve esnek uç öğeleri sırasıyla üst ve altta sabitlemek için. Son olarak, öğeleri metninizin alt kısmı (veya taban çizgisi) boyunca hizalayacak temelimiz var. Bu, farklı yazı tipi boyutlarına sahip öğeleri hizalamaya çalışırken son derece yararlıdır.

Ana eksen boyunca yasla

Şekil 5: İçeriği yasla: merkez; ürünlerimizi ana eksende ortalayacak

İçeriği yasla: merkez; ürünlerimizi ana eksende ortalayacak

Şimdi çapraz eksen boyunca çalışan merkezleme var - bizim durumumuzda yukarıdan aşağıya - ana eksen boyunca merkezleme yapmamız gerekiyor. Bunun için kullanıyoruz justify-content: center (Yukarıda verilen).

Tıpkı ile hizalama öğeleri biz de kullanabiliriz esnek başlangıç veya esnek uç , Hem de arasındaki boşluk ve boşluk , bu da öğeler arasındaki kalan alanı eşit olarak böler. Bu, kenar boşluğunun ve genişliklerin yüzde 100'ünü toplamayan ızgara düzenleriyle çalışırken çok kullanışlıdır.

Varsayılandan geçiş yaparsak esnek yönü: sıra; -e esnek yön: sütun; ana eksen soldan sağa yukarıdan aşağıya değişebilir. Sütuna geçtiğimizde, hizalama öğeleri yatay hizalama olurken yaslama içeriği dikey hizalama olur.

Birden çok çizgiyi hizalayın

Süre hizalama öğeleri ve haklı içerik tek bir içerik satırınız veya sütununuz olduğunda harika çalışır, kullanım sonucunda birden fazla içerik satırı ile uğraşırken işler biraz daha karmaşık hale gelir. esnek sarma: sarma; esnek kabın üzerinde.

hizalama içeriği aynı şekilde çalışır haklı içerik , ancak birden fazla içerik satırımız olduğunda devreye girer. Başvurarak hizalama içeriği: merkez; Çizgilerin çapraz eksenin ortasında demirlenmesini ve elemanlarını buradan ortalamasını sağlayabiliriz.

Tıpkı ile haklı içerik biz de kullanabiliriz esnek başlangıç , esnek uç , arasındaki boşluk ve boşluk . Bununla birlikte, bu sefer flex öğelerin kendilerine değil, içerik satırları veya sütunları arasındaki boşluğa atıfta bulunurlar.

Şimdi, sadece dört CSS satırıyla, esnek bir kabın tüm doğrudan alt öğelerini dikey ve yatay olarak ortalamanın kurşun geçirmez bir yoluna sahibiz.

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

Boşluğu doldurun

Şimdiye kadar, hizalama hakkında öğrendiğimiz her şey, esnek konteyner ve altlarını nasıl hizaladığı ile ilgili. Align-self ile, hizalama öğeleri tek tek ayarlayarak esnek kapsayıcıda ayarlanan özellik hizalanmak -e esnek başlangıç , esnek uç , merkez , temel veya Uzatmak .

Flexbox'ın sıklıkla yanlış anlaşılan bir başka kısmı da büyüme, küçültme ve temel değerlerle nasıl çalışılacağıdır. Kusursuz piksel ızgaraları ile ilgili fikirleri bir kez daha atmak ve flexbox'ın esnek olduğunu kucaklamak faydalıdır.

Her bir esnek öğeye bir esnek büyüme , esnek küçültmek ve bir esnek tabanlı değer. Bu değerlerle ideal bedenlerimizi belirtebilir ve ardından fazladan veya yeterli alan olmayan durumlarda öğelerin nasıl davranması gerektiğini belirleyebiliriz. Oradan, öğeler sadece kendileri için çözecektir.

Bu özellikleri şöyle düşünmeyi seviyorum:

  • esnek büyüme : Fazladan boş alan olduğunda nasıl davranırım? Esnek öğeler kalan alanı nasıl bölecek?
  • esnek küçültmek : Tüm esnek öğeler için yeterli yer olmadığında nasıl davranırım? Kabı taşmak yerine, kim her şeyi sığdırmak için bir parçasından vazgeçecek?
  • esnek tabanlı : Elemanınızda belirli bir genişlik veya yükseklik ayarlamak yerine ideal olarak genişlik (satır olarak) veya yükseklik (sütun olarak) ne olacaktır?

Bu özellikleri ayrı ayrı belirtmek mümkün olsa da, hemen hemen her zaman esnek kısaltmayı kullanarak büyümek , küçültmek ve temel değerleri aynı anda. Videoları kontrol edin Flexbox.io flex steno özelliğinin daha ayrıntılı bir açıklaması için.

Büyüyor ve küçülüyor

Buradaki fikir, ideal genişliğimizi veya yüksekliğimizi temel değerle ayarlayabilmemiz ve daha sonra esnek öğeler için fazladan alan olduğunda, esnek büyüme mülkiyet ne kadar ekstra alınacağına karar verecektir. Benzer şekilde, yeterli alan olmadığında, shrink özelliği her bir öğenin ne kadar vazgeçeceğine (veya 'küçültülmesine') karar verecektir.

esnek büyüme ve esnek küçültmek özellikler birimsiz, orantılı değerlerdir. Diğer tüm esnek öğelere göre öğenin ne kadar büyüyeceğini veya küçüleceğini açıklarlar.

Diyelim ki iki esnek öğemiz var: video ve jenerik. Videoyu şu şekilde ayarlayacağız: esnek: 1 1 700 piksel; ve krediler esnek: 3 3300 piksel; . Şimdi bu öğelerin her ikisinin de üst öğesi esnek kapsayıcıdır ve 1000 piksel genişliğinde olduğunda işler mükemmel şekilde çalışır: video 700 pikselini kaplar ve krediler diğer 300 pikselini alır.

Esnek kapsayıcı 1500 piksel genişliğinde olduğunda ne olur? Çalışmamız gereken fazladan bir 500 pikselimiz var, peki bu nereye gidiyor? Bu nerede esnek büyüme Krediler 3'e ayarlıyken video 1'e ayarlandı. Bu, tüm ekstra oda anlamına gelir, krediler videonun alacağı alan miktarının (125 piksel) üç katı (375 piksel) alacaktır.

Benzerlik, esnek kapsayıcımız 1000 pikselden küçük olduğunda ne olur? Diyelim ki 900 piksel: video ve jenerik nasıl işliyor? Kayan sayılardan farklı olarak, yeni bir satıra geçmeyiz veya yüzdelerle küçültmeyiz. Bunun yerine, esnek küçültmek Emlak.

Kredilerin bir esnek küçültmek 3'tür ve videoda bir esnek küçültmek 1, bu, jeneriklerin videodan üç kat daha fazla alandan vazgeçeceği anlamına gelir. Dolayısıyla, bir yerden 100 piksel kesmemiz gerektiğinden, krediler 75 pikselden vazgeçerken, video kapsayıcı yalnızca 25 pikselden vazgeçecek.

Bilinmeyen gezinme boyutu

Flexbox'ın bazı yaygın kullanım durumlarına bakalım. WordPress gibi bir CMS'de daha önce bir navigasyonla çalıştıysanız, navigasyonunuza kaç öğenin dahil edileceğini tahmin etmenin zor olabileceğini bilirsiniz.

Boşluğu tüm öğeler arasında eşit olarak dağıtmak için JavaScript gerekir. Örneğin, üç öğeniz varsa, her biri genişliğin% 33,33'ünü kaplarken, beş öğeden her biri% 20'sini kaplamalıdır.

Örnek olarak bu yaygın olarak görülen koda bir göz atalım:

Flexbox ile, sadece birkaç CSS satırı ile bu navigasyonu kolayca oluşturabilir ve hatta duyarlı hale getirebiliriz. Tek yapmamız gereken, gezinme kapsayıcımızı (genellikle sırasız bir öğe listesi) şu şekilde ayarlamaktır: ekran: esnek ve ardından esnek öğelerin her biri esnek: 1 veya esnek büyüme: 1; .

Bu, liste öğelerini yatay olarak uzatacak ve mevcut genişliğe mükemmel şekilde sığdıracaktır. Bunun bu kadar güzel çalışmasının nedeni, esnek öğeleri 1 büyüyecek şekilde ayarlamamızdır; bu, fazladan boşluk kaldığında, tüm öğeler arasında eşit bir şekilde bölüneceği anlamına gelir.

Bununla ilgili daha fazla bilgi edinmek ve gezinme öğelerinizi nasıl farklı boyutlandıracağınızı öğrenmek için, şu adreste bulunan duyarlı gezinme eğitimini izlediğinizden emin olun. Flexbox.io .

Eşit yükseklikteki sütunlar

Şekil 6: öğeleri hizala: merkez; öğelerimizi, bizim durumumuzda yukarıdan aşağıya olan çapraz eksen boyunca ortalayacaktır.

hizalama öğeleri: merkez; öğelerimizi, bizim durumumuzda yukarıdan aşağıya olan çapraz eksen boyunca ortalayacaktır.

Hiç CSS'nin bir yüksekliğe sahip olmasını dilediniz mi: as-high-as-the-sibling-property? Hepimiz oradaydık - her biri farklı boyutlarda (yukarıda) üç içerik sütunumuz var. İçerik dinamiktir ve site duyarlıdır, bu nedenle her biri için sabit bir yükseklik ayarlamak söz konusu değildir ve bir JavaScript düzeltmesi ideal değildir.

Daha önce, hizalama öğelerinin varsayılanının streç olduğunu öğrendik. Bu, esnek öğelerin üst esnek kabına sığacak şekilde uzayacağı anlamına gelir. Esnek kabın yüksekliği nasıl belirlenir? Neredeyse her zaman en yüksek içerik kutusunun yüksekliğine göre.

Örneğin aşağıdaki işaretlemeyi ele alalım. Bunu yüzer sayılar ve yüzde genişlikleriyle ifade edersek, kabın orta öğeye göre boyutlandırıldığını ve diğer ikisinin yalnızca olması gerektiği kadar yüksek olduğunu göreceğiz.

I'm short

I'm a pretty tall box that is the biggest

I'm a medium sized box

Flexbox ile, kutular esnek konteynere sığacak şekilde gerilir ve tümü eşit yükseklikte olur

Flexbox ile, kutular esnek konteynere sığacak şekilde gerilir ve tümü eşit yükseklikte olur

Şimdi, basitçe kullanırsak ekran: esnek; esnek kapsayıcıda ve her bir öğeyi% 33,33 olacak şekilde ayarlayın. esnek tabanlı özelliği, esnek öğeler, içlerinde ne kadar içerik olduğuna bakılmaksızın hemen tüm çapraz eksen boyunca gerilir (yukarıdaki resme bakın).

.container { display:flex; } .box { flex: 1 1 33.33%; }

Flexbox avantajları

Umarım şimdiye kadar Esnek Kutu modülünün nasıl kullanılacağını öğrenmenin değerini görüyorsunuz. CSS ile yaşadığınız her sorunu çözmeyecek olsa da, her tasarımcı ve geliştiricinin bilmesi ve cephaneliğinde bulunması gereken önemli bir araçtır.

CSS'ye bu kadar büyük bir şey gelmeyeli epey oldu ve bunun CSS'nin öğrenmesi en zor kısımlarından biri olduğunu iddia ediyorum. Sadece öğrenme sürerken zorladığınızı unutmayın, bu yüzden Flexbox tamamen ustalaşabileceğiniz bir şeydir!

Sahip olunması gereken kaynaklar

Flexbox nedir ?!

'Flexbox nedir ?!' oluşturduğum 20 videolu ücretsiz bir eğitim kursudur. Kursun ilk yarısında, her video Flexbox'ın yeni bir yönünü tanıtıyor. Bunları güzel ve kısa tuttum, böylece daha sonra belirli bir bölümü tazelemeniz gerektiğinde bunlara başvurabilirsiniz. Kursun ikinci yarısı, karşılaştığımız yaygın yerleşim sorunlarının çoğunu hızlı ve kolay bir şekilde çözmek için Flexbox'ı nasıl kullanabileceğimizi ayrıntılı olarak anlatan gerçek dünya örneğini ele alıyor.

Flexbox için eksiksiz bir rehber

Flexbox'ı kullanmaya başladığınızda eğitim materyallerini bir kenara bırakabilirsiniz. Bununla birlikte, görsel bir referansı elinizin altında bulundurmanız faydalı olacaktır. Chris Coyier'den gelen bu harika kaynak, hangilerinin flex konteynır için geçerli olduğunu ve hangilerinin doğrudan flex öğeler için geçerli olduğunu gösteren 13 farklı Flexbox özelliğinin her birini parçalara ayırıyor.

Flexbug'lar

Flexbox hatasız değildir ve her şey gibi, bilmeniz gereken bir avuç tarayıcılar arası hata ve geçici çözüm vardır. Flexbugs, bilinen bir dizi Flexbox hatasını özetlemenin yanı sıra olası düzeltmeler ve geçici çözümler sunar.

Daha fazla oku: