สร้างเลย์เอาต์ที่ซับซ้อนด้วย Postcss-Flexbox

Sep 17, 2025

วิธีการ

FlexBox เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการลด CSS BLOAT และมีน้ำตาลในตัวเพื่อจัดการกับสิ่งต่าง ๆ เช่นการสั่งซื้อและการจัดตำแหน่ง แต่มันไม่ได้ให้ความช่วยเหลือใด ๆ ในการทำคณิตศาสตร์ที่สร้างคอลัมน์และขนาดรางน้ำ ผู้เชี่ยวชาญจำนวนมากของรัฐซ้ำ ๆ : Flexbox ดี แต่ไม่ใช่ระบบกริด

เราควรใช้ FlexBox แต่เราไม่ควรทิ้งแนวคิดพื้นฐานไว้เบื้องหลังระบบกริดที่ดึงเราออกจากการออกแบบ 'ยุคภูมิศาสตร์':

ทำให้คอลัมน์สัดส่วนกับบางสิ่งบางอย่าง
ใช้รางน้ำที่สม่ำเสมอตลอดการออกแบบของคุณ

เราสามารถใช้หนึ่งในระบบ Flexbox Grid จำนวนมากออกไปที่นั่น แต่ในความซื่อสัตย์ทุกรูปแบบที่อยู่เบื้องหลังเหล่านี้ส่วนใหญ่จะเหมือนกับกริดที่ใช้ลอย ผู้เขียนเพียงเพิ่มการแสดงผล: Flex ไปยังคอนเทนเนอร์พร้อมกับคลาส Helper บางตัวที่ทำให้คุณสมบัติ Flexbox ของ obluscate (ตัวอย่างเช่นคลาสเช่นคลาส .grid-vertical-align-mid เป็นการทำให้งงงวยของ จัดตำแหน่งรายการ: ศูนย์ .

ความแตกต่างเพียงอย่างเดียวคือตอนนี้คอลัมน์คือ 'งอ' ซึ่งหมายความว่าเราได้รับน้ำตาลที่ฉันพูดถึงก่อนหน้านี้ แต่สิ่งนี้ยังไม่สามารถแก้ปัญหาหลักที่กริดเผชิญกับหน้าวันนี้: ระบบกริดยังคงส่งออก CSS จำนวนมากและกริดยังคงน่าเบื่อ

25 เทมเพลตเว็บไซต์ชั้นนำ

ปัญหาเกี่ยวกับกริด

System bloat: Bootstrap’s generated CSS for the grid alone is 16,435 characters – most of which you’ll never use — ระบบ BLOAT: CSS ที่สร้างขึ้นของ Bootstrap สำหรับกริดเพียงอย่างเดียวคือ 16,435 ตัวอักษร - ซึ่งส่วนใหญ่คุณจะไม่เคยใช้

ผู้เขียนตารางมักจะแจกจ่ายชุด CSS ขนาดใหญ่ที่สามารถชดเชยการสั่งซื้อแหล่งที่มาจัดตำแหน่งและปรับขนาดตามขนาดอุปกรณ์โดยพลการ พวกเขาพึ่งพา GZIP เพื่อลดความเสียหายบางอย่าง แต่สิ่งนี้ไม่ได้รับทั้งหมด ถ้าคุณไม่ต้องการคุณสมบัติพิเศษเหล่านั้น

สมมติว่าเป็นกรอบที่คุณใช้ข้อเสนอ Grid Mixins ทางออกที่ดีที่สุดอาจเรียนรู้และเขียนคอลัมน์ของคุณเอง สิ่งนี้ทำให้เกิดการขยายตัวเล็กน้อย แต่ จำกัด กริดของคุณต่อเศษส่วนของคุณและไม่ได้มีความคล่องตัวในการเคลื่อนย้ายระหว่างเฟรมเวิร์กที่แตกต่างกัน

ไปยังประเด็นที่สอง นักออกแบบได้กลายเป็นที่ถูกล็อคทางจิตใจในการตัดสินใจทั้งหมดของพวกเขาตามการผสมผสานของคอลัมน์ขนาดเท่ากัน เป็นผลให้อินเทอร์เน็ตทั้งหมดเริ่มเบลอเข้าด้วยกันเป็น 'สแต็กบนมือถือ การรวมคอลัมน์ 1/12 ใน Dystopia อื่น ๆ

Flexbox แนะนำ ยืดหยุ่น ซึ่งเป็นอิสระให้เราเล็กน้อย ตอนนี้เราสามารถตั้งค่าขนาดที่ดูดีและเติมพื้นที่ที่เหลือด้วยองค์ประกอบที่ยืดออก แต่รางน้ำจะเข้าแถวกันอย่างสม่ำเสมอตลอดหน้าหรือไม่? มีพื้นที่เนื้อหาที่วางไว้กับสัดส่วนใด ๆ ในใจหรือเรากลับไปที่เพียงแค่มีปีก?

เข้าสู่มังกร

วิธีการแก้ปัญหาเหล่านี้รวมอยู่ในฟังก์ชั่นที่เรียกว่า postcss-ant Postcss Plugins สามารถใช้งานได้กับเครื่องมือสร้างหลากหลายเช่น Webpack, Gulp หรือเพียงแค่บรรทัดคำสั่ง มดผสมเข้ากับ CSS ธรรมดาอย่างราบรื่น (หรือตัวประมวลผลล่วงหน้า) ด้วย API ที่เรียบง่ายที่หลอกลวงที่หน้ากากมีความคิดที่เหลือเชื่อ การคำนวณ สูตร. มันต้องใช้พารามิเตอร์แบบผสมสองแบบที่จะดึงขนาดที่เป็นมิตรกับกริด

ตัวอย่างอาจทำให้ชัดเจนขึ้น: ความกว้าง: ขนาด (1/2) รับ (1) ผลตอบแทน Calc (99.99% * 1/2 - (30px - 30px * 1/2)) . มาทำลายนี้กัน:

ขนาด () เป็นรายการขนาดที่คั่นด้วยช่องว่าง สิ่งเหล่านี้สามารถรวมกันของขนาดที่หลากหลาย: หมายเลขคงที่ในรูปแบบของความยาว CSS ที่ถูกต้อง ( px , em , % ); เศษส่วนหรือตัวเลขลอย (ซึ่งส่งคืนสิ่งที่เหลือคือ Sans หมายเลขคงที่); และ อัตโนมัติ คำหลัก (ซึ่งส่งคืนขนาดใดก็ได้ที่เหลือทับเศษส่วนและตัวเลขคงที่)
ถอนได้ () เป็นดัชนี 1 ที่ใช้ขนาดกริดที่เป็นมิตรจากรายการของคุณ ดังนั้น ขนาด (1px 2px 3px) รับ (2) จะกลับมา 2px
ที่ การคำนวณ สูตรเป็นขนาดที่เป็นมิตรกับกริด

เราได้รับความกว้างสำหรับแต่ละคอลัมน์ในตารางสองคอลัมน์ที่มีรางน้ำ 30px เดียวระหว่างพวกเขา:

.grid {
  จอแสดงผล: Flex;
  Flex-wrap: ห่อ;
}

.half {
  ความกว้าง: ขนาด (1/2) รับ (1); / * ส่งคืน calc (99.99% * 1/2 - (30px - 30px * 1/2)) * /
  มาร์จิ้นขวา: 30px; / * วางรางน้ำที่ด้านขวาของแต่ละคอลัมน์ * /
}

.half: nth-child (2n + 2) {/ * เริ่มต้นที่องค์ประกอบที่ 2 และเริ่มนับ 2s * /
  มาร์จิ้นขวา: 0; / * ลบรางน้ำสุดท้ายออกจากทุกแถว * /
}

สิ่งนี้ทำให้นักออกแบบมีพลังในการใช้ขนาดเหล่านี้ได้ทุกที่ที่พวกเขาเห็นสมควร แต่ลองดำน้ำลึก

ขนาด (100px 1/2) รับ (1) ผลตอบแทน 100px . ง่ายพอ แต่ทำไมเราต้องใช้มดเพื่อกลับมา 100px ? เราจะไปที่หนึ่งในวินาที

ขนาด (100px 1/2) รับ (2) ผลตอบแทน Calc ((99.99% - (100px + (30px * 1)) * 1/2 - (30px - 30px * 1/2)) . อึศักดิ์สิทธิ์ มดกำลังค้นหาขนาดรวมของจำนวนคงที่แล้วกลับมา 1/2 สิ่งที่เหลืออยู่ - ในวิธีที่เป็นมิตรกับกริดที่ n

เราสามารถใช้สิ่งเหล่านี้ได้ การคำนวณ สูตรเพื่อสร้างกริดด้วย 100px คอลัมน์และสอง 1/2 คอลัมน์เช่นนั้น (ฉันจะไม่ละเว้น .grid สไตล์เพื่อบันทึกต้นไม้ แต่ให้แน่ใจว่าได้รวมไว้ในรหัสของคุณ):

 .Fixed-Size {
  ความกว้าง: ขนาด (100px 1/2) รับ (1); / * ส่งคืน 100px (ฉันรู้ว่าดูเหมือนว่าโง่ แต่ทนกับฉันอีกหน่อย) * /
  มาร์จิ้นขวา: 30px;
}

.half {
  ความกว้าง: ขนาด (100px 1/2) รับ (2); / * ส่งคืน calc ((99.99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) * /
  มาร์จิ้นขวา: 30px;
}

.half: nth-child (3n + 3) {
  มาร์จิ้นขวา: 0;
}

ตอนนี้เราสามารถรับขนาดที่ไม่สามารถทำได้ก่อนหน้านี้ แต่ยังไม่ยืดหยุ่นเกินจริงและสามารถต้องเขียนจำนวนมากเมื่อจัดการกับหลายขนาด

ตัวประมวลผลล่วงหน้าลูป

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 — มาร์กอัปน้อยที่สุด: มาร์กอัปที่น้อยที่สุด, สองคอลัมน์, ตาราง nth ที่ใช้ postcss-ant สังเกตุว่าไม่มีระยะขอบขวาบนองค์ประกอบสุดท้ายในแถว

ตัวประมวลผลล่วงหน้าและ POSTCSS ไม่สามารถเข้ากันได้เสมอ - โดยเฉพาะอย่างยิ่งเมื่อมีการใช้ไวยากรณ์ที่กำหนดเอง โชคดีที่ API ของ Ant เป็นมิตรกับผู้ประมวลรอยแยก เราสามารถใช้ Postcss-Parser เช่น POSCSS-SCSS ด้วยปลั๊กอิน PRECSS แต่วิธีการนี้ใช้ปลั๊กอิน Postcss ที่ยังไม่เสร็จ / ไม่ได้ทำมากมายที่ฟังก์ชั่นการเลียนแบบของ SASS ที่ไม่ดี ฉันพบเวิร์กโฟลว์ที่ดีที่สุดคือ:

ใช้ตัวประมวลผลล่วงหน้าอย่างรวดเร็วเช่น Node-Sass เพื่อดู in.scss ถึง out.css
ใช้ POSTCS เพื่อดู out.css ถึง final.css
& lt; link & gt; ถึง final.css ในมาร์กอัปของคุณ

สิ่งนี้จะช่วยให้คุณเป็นไวยากรณ์ที่ดีที่สุดของ Preprocessor ที่มีปลั๊กอิน POSTCSS ทั้งหมดที่คุณต้องการ

ตอนนี้สำหรับสิ่งที่ยอดเยี่ยม ตัวประมวลผลล่วงหน้ามักจะมีวิธีการลูปจำนวนครั้งที่ระบุในขณะที่ให้สิ่ง iterator:

 @ สำหรับ $ I จาก 1 ถึง 3 {
  เนื้อหา: $ I; // ส่งคืนเนื้อหา: 1; เนื้อหา: 2; เนื้อหา: 3;
}

ด้วยความรู้เล็กน้อยเกี่ยวกับตัวประมวลผลล่วงหน้าคุณสามารถเริ่มใช้มดในวิธีที่น่าสนใจจริงๆ ...

 $ ขนาด: 100px 1/2 1/2;
$ รางน้ำ: 30px;
$ ความยาว: ความยาว ($ ขนาด);

.Column {
  Margin-Right: $ Gutter;

  @ สำหรับ $ I จาก 1 ถึง $ ความยาว {
    & amp;: nth-child (# {$ length} n + # {$ i}) {
      ความกว้าง: ขนาด ($ size) รับ ($ I) รางน้ำ ($ รางน้ำ);
    }
  }

  & amp;: nth-child (# {$ length} n + # {$ length}) {
    มาร์จิ้นขวา: 0;
  }
}

ตอนนี้คอลัมน์ขนาดที่ไม่สม่ำเสมอของเราห่อเป็นแถวใหม่โดยไม่มีมาร์กอัปเพิ่มเติม ไปข้างหน้าและจัตช์ไปรอบ ๆ ด้วยรหัสนี้ ลองขนาดที่แตกต่างกันในรางน้ำและเพิ่มขนาดใหม่ (เช่น 100px อัตโนมัติ 100px)

นี่คือรูปแบบที่ค่อนข้างธรรมดาที่มีมดดังนั้นฉันจึงห่อมันลงในคุณสมบัติที่ทำงานร่วมกับวานิลลา CSS เช่นกัน:

 .grid {
  Generate-Grid: ขนาด (100px 1/2 1/2); / * คุณสามารถส่งผ่านตัวเลือกเพิ่มเติม แต่การถอน () ไม่จำเป็นอีกต่อไป * /
}

ตัวเลือกมากมาย

Preprocessor loops: ant really begins to show its strength when we combine it with preprocessor loops to create layouts that used to be impossible — ลูปตัวประมวลผลล่วงหน้า: มดเริ่มแสดงความแข็งแกร่งเมื่อเรารวมกับลูปประมวลรอกล่วงหน้าเพื่อสร้างเลย์เอาต์ที่ใช้เป็นไปไม่ได้

กริด nth นั้นยอดเยี่ยมมากเมื่อคุณรู้ขนาดและจำนวนองค์ประกอบที่จะผ่านไป แต่บางครั้งคุณก็ต้องการสร้างคอนเทนเนอร์และเพียงแค่ทิ้งองค์ประกอบขนาดสุ่มบางอย่างไว้ในนั้น ในกรณีเหล่านี้ ระยะขอบเชิงลบ กริดเป็นทางออกที่ดีที่สุดของคุณ ผ่านไป ระยะขอบเชิงลบ ถึงมดเช่นนี้:

.grid {
  มาร์จิ้น: 0 -15px;
}

.Column {
  ความกว้าง: ขนาด (1/3) รับ (1) กริด (ระยะวางลบ);
  มาร์จิ้น: 0 15px;
}

บทสรุป

ตัวอย่างเหล่านี้เป็นเพียงเหลือบเล็ก ๆ ที่ทุกสิ่งที่ยอดเยี่ยม postcss-ant สามารถทำได้ มันมีพารามิเตอร์เพิ่มเติมสองสามตัวและการจัดการข้อผิดพลาดเชิงพรรณนามากมาย แต่พลังที่แท้จริงของมดคือคุณ

เครื่องมือ 'ใบ้' ที่ส่งคืนข้อมูลเล็กน้อยเป็นเครื่องมือที่ดีที่สุดเสมอเนื่องจากพวกเขานำพลังงานกลับเข้าไปในมือของนักพัฒนา นั่นคือสิ่งที่ postcss-ant ได้รับการออกแบบให้ทำ หากคุณสนใจให้มุ่งหน้าไปที่ corysimmons.github.io/postcsss-ant สำหรับการสาธิตที่ละลายใบหน้าและเอกสารหวาน ๆ

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 286 ของนิตยสารสุทธิ ซื้อที่นี่

บทความที่เกี่ยวข้อง:

ทำไมการออกแบบเว็บต้องการผู้เชี่ยวชาญ UX
10 หนังสือออกแบบเว็บไซต์ยอดนิยมสำหรับคริสต์มาส 2016
3 เครื่องมือยอดนิยมสำหรับการทดสอบประสิทธิภาพของเว็บ

สร้างเลย์เอาต์ที่ซับซ้อนด้วย Postcss-Flexbox

ปัญหาเกี่ยวกับกริด

เข้าสู่มังกร

ตัวประมวลผลล่วงหน้าลูป

ตัวเลือกมากมาย

บทสรุป

วิธีการ - บทความยอดนิยม

รูปวาดรูป: คู่มือเริ่มต้น

วิธีการสร้างศิลปะ pin-up

4 ขั้นตอนในการใช้ฟอนต์ตัวแปร

วิธีการปรับปรุงศิลปะตัวละครของคุณ

วิธีการละลายวัตถุ 3 มิติด้วย Three.js

การสร้างแบบจำลองยานอวกาศสำหรับการออกแบบการเล่นเกม

วิธีการสร้างสภาพแวดล้อมฤดูหนาว

เพิ่มแผนภูมิ D3.JS ด้วยการไล่ระดับสี SVG

หมวดหมู่