Postcss-FlexBox ile karmaşık düzenler oluşturun

Sep 15, 2025

Nasıl Yapılır

FlexBox, CSS Bloat'ı azaltmak için harika bir araçtır ve kaynak siparişi ve hizalaması gibi şeylerle başa çıkmak için bir miktar şekere sahiptir. Ancak, sütun ve oluk boyutları oluşturan matematiği yapmak için herhangi bir yardım sunmuyor. Birçok uzman art arda durumunda: FlexBox güzeldir, ancak bir ızgara sistemi değil.

FlexBox kullanmalıyız, ancak bizi tasarımın 'Geocities Dönemi' dışında çeken ızgara sistemlerinin arkasındaki temel kavramları atmamalıyız:

Bir şeyle orantılı sütunları yapın
Tasarımınız boyunca tutarlı oluklar kullanın

Pek çok FlexBox şebekesi sistemlerinden birini kullanabiliriz, ancak tüm dürüstlükte, bunların arkasındaki stiller çoğunlukla float bazlı ızgaralarla aynıdır. Yazarlar sadece ekran ekleyerek: FlexBox özelliklerinin (örneğin, örneğin bir sınıf gibi bir sınıf) olan bazı yardımcı sınıflar ile birlikte konteynere esnekleyin. .Grid-dikey hizalama ortası şaşkındır Hizala-Öğeler: Merkez ).

Tek fark, şimdi sütunlar 'esnektir', bu da daha önce bahsettiğim şekeri aldığımız anlamına gelir. Ancak bu hala ızgaraların yüzleştiği ana sorunları hala çözmez: ızgara sistemleri hala bir ton CSS şişesi çıktı ve ızgaralar hala sıkıcı.

25 Top-Sınıf Web Sitesi Şablonları

Izgaralarla ilgili sorun

System bloat: Bootstrap’s generated CSS for the grid alone is 16,435 characters – most of which you’ll never use — Sistem Bloat: Bootstrap'ın tek başına ızgara için üretilen CSS'si 16.435 karakterdir - çoğu asla kullanmayacağınız

Izgara yazarları tipik olarak, bazı keyfi aygıt boyutuna göre düzenleyebilen, kaynak siparişi, hizalayabilecek ve yeniden boyutlandırabilen büyük CSS paketlerini dağıtır. Bazı hasarları azaltmak için Gzip'e güveniyorlar, ancak bu hepsini anlamıyor. Ya bu ekstra özelliklere ihtiyacınız yoksa?

Şu anda kullandığınız çerçeveyi varsayarsak, Izgara Mixins, en iyi çözüm, bunları öğrenmek ve kendi sütunlarınızı oluşturacak olabilir. Bu, küçük bir şişirim üretir, ancak ızgaralarınızı kesirlere sınırlar ve farklı çerçeveler arasında size çok fazla hareketlilik sunmaz.

İkinci konuyla ilgili. Tasarımcılar, tüm kararlarını aynı derecede büyüklükteki sütunların bir kombinasyonuna dayanarak zihinsel olarak kilitlendi. Sonuç olarak, internetin tamamı bir 'mobil üzerinde bir yığın halinde bulanıklaşmaya başlıyor; 1/12 Sütun kombinasyonları başka bir şeyde 'distopi.

FlexBox tanıtıldı büyümek , bu bizi biraz serbest bıraktı. Şimdi iyi görünen ve kalan alanı gerilmiş bir elemanla dolduran boyutları ayarlayabiliriz, ancak oluklar sayfada sürekli olarak sıraya girer mi? İçerik alanları herhangi bir oranda göz önünde bulundurulur mu, yoksa sadece kanatlara dönelim mi?

Ejderhaya gir

Her iki problemin de çözeltisi, PostCSS-ANT adlı bir fonksiyonda sarılır. Postcss eklentileri, WebPack, Gulp veya sadece komut satırı gibi bir dizi yapı aracı ile kullanılabilir. Karınca, düzinelerce karıştırmayı maskeli ve maskeli basit bir API ile düz CSS (veya herhangi bir ön işlemciye) içine sorunsuz bir şekilde karışır. hesaplamak formüller. Şebeke dostu boyutlarda bir pethora almak için iki karışımlı parametre gerektirir.

Bir örnek bu daha net hale getirebilir: genişlik: Boyutları (1/2) Al (1) İadeler Calc (% 99.99 * 1/2 - (30px - 30px * 1/2))) . Bunu bozalım:

boyutları () Alan ayrılmış bir boyut listesidir. Bunlar, çeşitli boyutların herhangi bir kombinasyonu olabilir: geçerli CSS uzunlukları formunda sabit sayılar ( piksel , emzik , % ); fraksiyonlar veya şamandıra numaraları (kalan her şeyi geri döndürür, SAD SADLERİ SABİTLER); ve Oto Anahtar kelimeler (hangi boyutta ne olursa olsun geri döndürülürse, sans kesirleri ve sabit sayılar)
yolmak() Listenizden ızgara dostu bir boyut getiren 1 tabanlı bir dizindir. Yani Boyutları (1px 2px 3px) Al (2) geri dönerdi 2px
hesaplamak Formül ızgara dostu bir boyuttur

Her sütun için genişliği, aralarında bir adet 30px oluklu iki sütunlu bir ızgarada genişlik yapıyoruz:

.Kafes {
  Ekran: Flex;
  Flex-Wrap: Sarma;
}

.yarım {
  Genişlik: Boyutlar (1/2) Al (1); / * Halk'yı döndürür (% 99.99 * 1/2 - (30px - 30px * 1/2)) * /
  Marj-sağ: 30px; / * Her sütunun sağ tarafına bir oluk koyar * /
}

.half: nth-child (2n + 2) {/ * 2. elemandan başlar ve 2S * /
  Marj-sağ: 0; / * Son oluğu her satırdan kaldırır * /
}

Bu zaten tasarımcıların bu boyutları kullanmaları gerektiğini her yerde kullanmaları gerektiğini, ancak daha derine dalalım.

Boyutları (100px 1/2) Al (1) İadeler 100px . Yeterince basit, ama neden geri dönmek için karınca kullanmalıyız? 100px ? Bir saniye içinde buna ulaşacağız.

Boyutları (100px 1/2) Al (2) İadeler Calc ((% 99.99 - (100px + (30px + (30px + (30px + (30))) * 1/2 - (30px - 30px * 1/2)) . Kutsal saçma. karınca, sabit sayıların toplam boyutunu bulmakta ve daha sonra geri dönüyor 1/2 ne olursa olsun bırakılırsa - nin ızgara dostu bir şekilde.

Bunları kullanabiliriz hesaplamak bir ızgara oluşturmak için formüller 100px sütun ve iki 1/2 Gibi sütunlar (ben atlayacağım .Kafes ağaçları kurtarmak için stiller, ancak bunları kodunuza eklediğinizden emin olun):

 .Fixed-beden {
  Genişlik: Boyutlar (100px 1/2) Al (1); / * 100px döndürür (aptalca göründüğünü biliyorum ama biraz daha uzun süre benimle ayı) * /
  Marj-sağ: 30px;
}

.yarım {
  Genişlik: Boyutlar (100px 1/2) Al (2); / * Halk'yı döndürür (((% 99.99 - (100px + (100px + (30px +)) * 1/2 - (30px - 30px * 1/2)) * /
  Marj-sağ: 30px;
}

.half: nth-child (3n + 3) {
  Marj-sağ: 0;
}

Şimdi daha önce bazı kullanış edilemez boyutlar alabiliriz, ancak bu kadar çok esnek değil ve birçok boyutla uğraşırken çok fazla yazı gerektirebilir.

Ön İşlemci Döngü

Minimal markup: A minimal markup, two-column, nth grid using postcss-ant. Notice how there is no margin-right on the last element in the row — Minimum İşaretleme: Postcss-karınca kullanılarak minimum bir işaretleme, iki sütunlu, nth ızgarası. Satırdaki son eleman üzerinde nasıl bir kenar boşluğunun yok olduğuna dikkat edin.

Ön işlemciler ve postcss, her zaman iyi geçinmez - özellikle özel sözdizimi dahil olduğunda. Neyse ki, karıncının API'si ön işlem dostudur. POSTCSS-SCS gibi bir POSTCSS-SCSS gibi bir POSTCSS-SCS'leri kullanabiliriz. En iyi iş akışını buldum:

İzlemek için NODE-SASS gibi hızlı bir ön işlemciyi kullanın. in.scss için out.csss
İzlemek için postcss kullanın out.csss için final.css
LINK & GT; için final.css İşaretlemede

Bu, kalbinizin arzularınızı tüm postcss eklentileriyle birlikte size en iyi preforeptsor sözdizimini sunar.

Şimdi havalı şeyler için. Ön işlemciler tipik olarak, bir yineleyici sağlarken belirli bir sayıyı döngü için bir yolu vardır:

 @ $ 1'den 3'e kadar {
  İçerik: $ i; // içeriği döndürür: 1; İçerik: 2; İçerik: 3;
}

Ön işlemler hakkında küçük bir bilgi ile, ANT'yi gerçekten ilginç yollarla kullanmaya başlayabilirsiniz ...

 $ Boyutları: 100px 1/2 1/2;
$ oluk: 30px;
$ uzunluk: uzunluk ($ boyutları);

.column {
  Marj-sağ: $ oluk;

  @ $ 1 ile $ 1 arasındadır {
    & amp;: nth-child (# {$ uzunluk} n + # {$ i}) {
      Genişlik: Boyutları ($ Boyutları) Get ($ Gutter);
    }
  }

  & amp;: nth-child (# {$ uzunluk} n + # {$ uzunluk}) {
    Marj-sağ: 0;
  }
}

Şimdi düzensiz boyutlu sütunlar ek bir işaretleme olmadan yeni satırlara sarılır. Devam et ve bu kodla birlikte tinker. Değişken boyutları, olukları ve yeni boyutlar eklemeyi deneyin (100px otomatik 100px gibi).

Bu karınca ile oldukça yaygın bir paterndir, bu yüzden vanilya CSS ile birlikte çalışan bir mülke sarıldım:

 .grid {
  Üretim ızgarası: Boyutlar (100px 1/2 1/2); / * Ek seçenekleri geçebilirsiniz, ancak () artık gerekli değildir. * /
}

Çok sayıda seçenek

Preprocessor loops: ant really begins to show its strength when we combine it with preprocessor loops to create layouts that used to be impossible — Ön İşlemci Döngüleri: Ant, imkansız olan düzenleri oluşturmak için ön işlemci döngüleriyle birleştirdiğimizde, gücünü gerçekten göstermeye başlar.

NTH ızgaraları, geçilecek öğelerin boyutunu ve sayısını bildiğinizde harika, ancak bazen bir konteyner oluşturmak ve sadece oradaki rastgele boyutlu elemanları terk etmek istersiniz. Bu durumlarda, negatif marj Izgaralar en iyi bahsinizdir. Basitçe geçmek negatif marj karınca gibi

.Kafes {
  Marj: 0 -15px;
}

.column {
  Genişlik: Boyutlar (1/3) GET (1) ızgara (negatif marj);
  Marj: 0 15px;
}

Sonuç

Bu örnekler, postcss-karınca yapabileceği tüm serin şeylerde sadece küçük bir bakışıydı. Birkaç isteğe bağlı parametreye ve bir sürü açıklayıcı hata işleme, ancak karıncanın gerçek gücü var.

Biraz veri döndüren 'Aptal' araçları, gücü geliştiricinin ellerine geri getirdikleri için her zaman en iyi araçlardır. Bu, postcss-karınca yapacak şekilde tasarlanmıştır. Eğer meraklıysanız, corysimmons.github.io/postcss-ant Yüz eriyen demolar ve tatlı dokümanlar için.

Bu makale başlangıçta net dergisinin 286 sayısında yayınlandı, Burada satın alın.

İlgili Makaleler:

Web tasarımının neden UX uzmanlarına ihtiyacı var?
Noel 2016 için 10 Üst Web Tasarım Kitapları
Web performansını test etmek için 3 En İyi Araçlar

Postcss-FlexBox ile karmaşık düzenler oluşturun

Izgaralarla ilgili sorun

Ejderhaya gir

Ön İşlemci Döngü

Çok sayıda seçenek

Sonuç

Nasıl Yapılır - En Popüler Makaleler

İPhone'da Photoshop Nasıl Yapılır (Evet, Bu bir şey)

Photoshop'ta geceye nasıl gidilir

Karışık ortam teknikleriyle hayalet dokular oluşturun

Boya yağlarda su dalgalanması

Elle çizilmiş bir görünüm oluşturmak için dijital araçların nasıl kullanılacağı

Bir fotoğrafı bir VR setine dönüştürme

Fotogerçekçi bir gökyüzü nasıl oluşturulur

Adobe XD'de prototipleme ile başlayın

Kategoriler