Bangun tata letak kompleks dengan Postcss-Flexbox

Sep 16, 2025

Bagaimana caranya

FlexBox adalah alat yang hebat untuk mengurangi BLOAT CSS, dan memiliki beberapa gula yang dibangun untuk menangani hal-hal seperti urutan sumber dan penyelarasan. Tetapi itu tidak menawarkan bantuan untuk melakukan matematika yang membuat ukuran kolom dan selokan. Seperti banyak pakar berulang kali menyatakan: Flexbox bagus, tetapi itu bukan sistem grid.

Kita harus menggunakan FlexBox, tetapi kita tidak boleh membuang konsep dasar di balik sistem grid yang menarik kami keluar dari 'era geocities' desain:

Membuat kolom sebanding dengan sesuatu
Gunakan selokan yang konsisten sepanjang desain Anda

Kita dapat menggunakan salah satu dari banyak sistem grid flexbox di luar sana, tetapi dalam semua kejujuran, gaya di belakang ini sebagian besar sama dengan kisi-kisi berbasis float. Penulis Just Tambahkan Layar: Flex ke wadah, bersama dengan beberapa kelas pembantu yang mengabaikan properti FlexBox (misalnya, seperti kelas .grid-vertikal-align-mid adalah kebingungan Align-Item: Pusat ).

Satu-satunya perbedaan adalah, sekarang kolom 'tertekuk', yang berarti kita mendapatkan gula yang saya sebutkan sebelumnya. Tetapi ini masih belum menyelesaikan masalah utama yang dihadapi kisi hari ini: sistem grid masih menghasilkan ton CSS bloat, dan kisi-kisi masih membosankan.

25 templat situs web kelas atas

Masalah dengan grid

System bloat: Bootstrap’s generated CSS for the grid alone is 16,435 characters – most of which you’ll never use — Sistem BLOAT: Bootstrap yang dihasilkan CSS untuk grid saja adalah 16.435 karakter - yang sebagian besar tidak akan Anda gunakan

Penulis grid biasanya mendistribusikan paket besar CSS yang dapat mengimbangi, memesan, menyelaraskan dan mengubah ukuran sesuai dengan ukuran perangkat sewenang-wenang. Mereka mengandalkan Gzip untuk mengurangi beberapa kerusakan, tetapi ini tidak mendapatkan semuanya. Bagaimana jika Anda tidak memerlukan fitur-fitur tambahan itu?

Dengan asumsi kerangka kerja yang saat ini Anda gunakan menawarkan campuran grid, solusi terbaik mungkin untuk mempelajari mereka dan menyusun kolom Anda sendiri. Ini menghasilkan sedikit kembung, tetapi membatasi grid Anda dengan pecahan dan tidak menawarkan Anda banyak mobilitas antara kerangka kerja yang berbeda.

Ke masalah kedua. Desainer telah dikunci secara mental untuk membuat semua keputusan mereka berdasarkan kombinasi tertentu dari kolom berukuran sama. Akibatnya, seluruh internet mulai kabur menjadi tumpukan di ponsel; 1/12 kombinasi kolom pada distopia lain.

FlexBox memperkenalkan Flex-tumbuh. , yang membebaskan kita sedikit. Sekarang kita dapat mengatur ukuran yang terlihat bagus dan mengisi ruang yang tersisa dengan elemen yang diregangkan, tetapi apakah selokan berbaris secara konsisten di seluruh halaman? Apakah area konten ditata dengan segala macam proporsi dalam pikiran, atau apakah kita kembali untuk hanya menyedihkannya?

Masukkan naga

Solusi untuk kedua masalah ini dibungkus dalam fungsi yang disebut postcs-semut. Plugin Postcss dapat digunakan dengan berbagai alat build seperti Webpack, Gulp atau hanya baris perintah. semut bercampur secara mulus ke CSS biasa (atau preprocessor apa pun) dengan API sederhana yang sederhana yang menutupi puluhan pikiran-bogging Calc. formula. Ini membutuhkan dua parameter mirip mixin untuk mengambil sejumlah ukuran ramah grid.

Contohnya mungkin membuat ini lebih jelas: lebar: Ukuran (1/2) Dapatkan (1) kembali Calc (99,99% * 1/2 - (30px - 30px * 1/2)) . Mari kita hancurkan ini:

Ukuran () adalah daftar ukuran yang dipisahkan ruang. Ini dapat berupa kombinasi berbagai ukuran: angka tetap dalam bentuk panjang CSS yang valid ( px. , em , % ); fraksi atau angka float (yang mengembalikan apa pun yang tersisa, sans nomor tetap); dan mobil Kata kunci (yang mengembalikan ukuran apa pun yang tersisa, fraksi sans dan angka tetap)
memetik() adalah indeks berbasis 1 yang mengambil ukuran ramah grid dari daftar Anda. Begitu Ukuran (1px 2px 3px) dapatkan (2) akan kembali 2px.
Itu Calc. Formula adalah ukuran ramah grid

Kami mendapatkan lebar untuk setiap kolom dalam jaringan dua kolom dengan selokan 30px tunggal di antara mereka:

.grid {
  Tampilan: Flex;
  Flex-Wrap: Bungkus;
}

.half {
  Lebar: Ukuran (1/2) Dapatkan (1); / * Mengembalikan Calc (99,99% * 1/2 - (30px - 30px * 1/2)) * /
  Margin-Right: 30px; / * Menempatkan selokan di sisi kanan setiap kolom * /
}

.half: Nth-child (2n + 2) {/ * Mulai dari elemen ke-2 dan mulai menghitung dengan 2s * /
  Margin-Right: 0; / * Menghapus selokan terakhir dari setiap baris * /
}

Ini sudah memberi desainer kekuatan untuk menggunakan ukuran ini di mana pun mereka melihat pas, tetapi mari kita selami lebih dalam.

Ukuran (100px 1/2) Dapatkan (1) kembali 100px. . Cukup sederhana, tetapi mengapa kita perlu menggunakan semut untuk kembali 100px. ? Kami akan membahasnya sebentar lagi.

Ukuran (100px 1/2) Dapatkan (2) kembali Calc ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) . Omong kosong suci. semut menemukan ukuran total angka tetap, dan kemudian kembali 1/2. dari apa pun yang tersisa - dengan cara yang ramah lingkungan.

Kita bisa menggunakan ini Calc. formula untuk membuat grid dengan a 100px. kolom dan dua 1/2. kolom seperti itu (saya akan menghilangkan .grid. Gaya untuk menghemat pohon, tetapi pastikan untuk memasukkannya dalam kode Anda):

 .fixed-size {
  Lebar: Ukuran (100px 1/2) Dapatkan (1); / * Mengembalikan 100px (Saya tahu itu tampak konyol tetapi beruang dengan saya untuk sedikit lebih lama) * /
  Margin-Right: 30px;
}

.half {
  Lebar: Ukuran (100px 1/2) Dapatkan (2); / * Mengembalikan Calc ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) * /
  Margin-Right: 30px;
}

.half: Nth-child (3n + 3) {
  Margin-Right: 0;
}

Sekarang kita bisa mendapatkan ukuran yang sebelumnya tidak dapat diraih, tetapi belum terlalu fleksibel dan dapat memerlukan banyak tulisan ketika berhadapan dengan banyak ukuran.

Preprocessor looping.

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 — Minimal Markup: markup minimal, dua kolom, grid NTH menggunakan postcs-semut. Perhatikan bagaimana tidak ada margin-kanan pada elemen terakhir di baris

Preprosesor dan postcs tidak selalu bergaul - terutama ketika sintaksis kustom terlibat. Untungnya, API Ant adalah ramah preprocessor. Kita dapat menggunakan postcs-parser seperti postcss-scs dengan plugin precss, tetapi pendekatan ini menggunakan banyak plugin postcss yang belum selesai / tidak terawat yang tidak meniru fungsi SASS. Saya telah menemukan alur kerja terbaik adalah untuk:

Gunakan preprocessor cepat seperti sapu-sass untuk menonton in.scss. untuk out.css.
Gunakan Postcss untuk ditonton out.css. untuk final.css.
& lt; tautan & gt; untuk final.css. dalam markup Anda

Ini memberi Anda sintaks preprocessor terbaik dengan semua plugin postcss yang diinginkan hati Anda.

Sekarang untuk hal-hal keren. Preprosesor biasanya memiliki cara untuk loop beberapa kali sementara menyediakan Iterator:

 @ untuk $ I dari 1 hingga 3 {
  Konten: $ i; // Kembali konten: 1; Konten: 2; Konten: 3;
}

Dengan sedikit pengetahuan tentang preprosesor, Anda dapat mulai menggunakan semut dengan cara yang sangat menarik ...

 $ Ukuran: 100px 1/2 1/2;
$ Talang: 30px;
$ panjang: panjang ($ ukuran);

.column {
  Margin-Right: $ selokan;

  @ untuk $ I dari 1 hingga $ panjang {
    & amp;: Nth-child (# {$ length} n + # {$ i}) {
      Lebar: Ukuran ($ Ukuran) Dapatkan ($ I) selokan ($ selokan);
    }
  }

  & amp;: nth-child (# {$ length} n + # {$ length}) {
    Margin-Right: 0;
  }
}

Sekarang kolom berukuran tidak beraturan kami membungkus baris baru tanpa markup tambahan. Silakan dan bermain-main dengan kode ini. Cobalah berbagai ukuran, talang, dan menambahkan ukuran baru (seperti 100px Auto 100px).

Ini adalah pola yang cukup umum dengan semut, jadi saya sudah membungkusnya menjadi properti yang bekerja dengan Vanilla CSS juga:

 .grid {
  Generate-Grid: Ukuran (100px 1/2 1/2); / * Anda dapat melewati opsi tambahan, tetapi Pluck () tidak lagi diperlukan. Atau
}

Banyak opsi

Preprocessor loops: ant really begins to show its strength when we combine it with preprocessor loops to create layouts that used to be impossible — Loop Preprocessor: semut benar-benar mulai menunjukkan kekuatannya ketika kita menggabungkannya dengan loop preprocessor untuk membuat tata letak yang tidak mungkin

Grid NTH sangat bagus ketika Anda tahu ukuran dan jumlah elemen yang akan dilewati, tetapi kadang-kadang Anda ingin membuat wadah dan hanya membuang beberapa elemen berukuran acak di sana. Dalam kasus-kasus ini, negatif-margin. Grid adalah taruhan terbaik Anda. Cukup lulus negatif-margin. untuk semut seperti itu:

.grid {
  Margin: 0 -15px;
}

.column {
  Lebar: Ukuran (1/3) Dapatkan (1) grid (margin negatif);
  MARGIN: 0 15px;
}

Kesimpulan

Contoh-contoh ini hanya sekilas sekilas di semua hal-hal keren yang bisa dilakukan postcss-semut. Ini memiliki beberapa parameter opsional dan banyak penanganan deskriptif kesalahan, tetapi kekuatan sejati semut adalah Anda.

Alat 'bodoh' yang hanya mengembalikan sedikit data selalu alat terbaik, karena mereka mengembalikan daya ke tangan pengembang. Itulah yang dirancang oleh postcss-semut. Jika Anda tertarik, pergilah ke corysimmons.github.io/postcss-ant. untuk beberapa demo peleburan wajah dan dokumen manis.

Artikel ini awalnya diterbitkan dalam edisi 286 dari Net Magazine, Beli di sini.

Artikel terkait:

Mengapa desain web membutuhkan pakar UX
10 Buku Desain Web Teratas untuk Natal 2016
3 Alat Top untuk Menguji Kinerja Web

Bangun tata letak kompleks dengan Postcss-Flexbox

Masalah dengan grid

Masukkan naga

Preprocessor looping.

Banyak opsi

Kesimpulan

Bagaimana caranya - Artikel Terpopuler

Dapatkan lebih banyak dari grafit dengan tips ini

Cara melukis gadis Elven

Buat efek teks 3D animasi

Dapatkan reaksi kepala Anda dengan lima faktor ini

Bagaimana cara menambahkan video ke PDF interaktif

Dapatkan Grips dengan Teknik Lukisan Basah Basah

Cara menyempurnakan rambut di potret Anda

Cara membuat situs web WordPress Anda multibahasa

Kategori