วิธีสร้างเค้าโครงอัจฉริยะเฉพาะ CSS ด้วย Flexbox

เผยแพร่แล้ว: 2022-03-11

กล่องแบบยืดหยุ่นหรือเรียกสั้นๆ ว่า Flexbox คือชุดของคุณสมบัติใน CSS ที่เปิดตัวในปี 2009 เพื่อจัดเตรียมระบบเลย์เอาต์ใหม่ที่โดดเด่น โมดูล Flexbox ถูกระบุว่าเป็นส่วนหนึ่งของ CSS เวอร์ชันที่สาม (CSS3)

คุณอาจใช้คุณสมบัติใหม่หลายอย่างใน CSS3 อยู่แล้ว เช่น box-shadow , border-radius , background gradients เป็นต้น อย่างไรก็ตาม Flexbox ยังไม่เห็นการยอมรับอย่างกว้างขวางว่าสมควรได้รับ อาจเป็นเพราะการเปลี่ยนแปลงที่แตกหักทั้งหมดที่ได้รับในช่วงหลายปีที่ผ่านมา หรือเนื่องจากได้รับการสนับสนุนเพียงบางส่วนใน Internet Explorer 10 หรือเพียงเพราะ Flexbox เป็นระบบนิเวศทั้งหมด ในขณะที่กระบวนทัศน์ก่อนหน้านี้มีพื้นฐานมาจากระบบเดียวที่พร้อมใช้งาน ไปคุณสมบัติ

มันทรงพลังมากและมีตัวเลือกมากมายเพื่อให้ได้เลย์เอาต์ที่แต่ก่อนเคยฝันถึงเท่านั้น

บทความนี้จะแนะนำคุณเกี่ยวกับพื้นฐานของ Flexbox และวิธีที่คุณสามารถใช้มันเพื่อให้ได้เลย์เอาต์ที่เจ๋งจริงๆ ซึ่งอาจต้องใช้การแฮ็ก CSS ที่ซับซ้อน หรือแม้แต่ JavaScript

ทำไมต้องใช้ Flexbox?

ตามค่าเริ่มต้น องค์ประกอบระดับบล็อก HTML จะซ้อนกัน ดังนั้นหากคุณต้องการจัดแนวพวกมันในแถว คุณต้องพึ่งพาคุณสมบัติ CSS เช่น float หรือจัดการคุณสมบัติการ display ด้วยการตั้งค่า table-ish หรือ inline-block

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

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

เข้าสู่เฟล็กซ์บ็อกซ์!

ด้วยกฎง่ายๆ ที่ใช้กับองค์ประกอบหลัก คุณสามารถควบคุมลักษณะการทำงานของเค้าโครงของเด็กทั้งหมดได้อย่างง่ายดาย

ด้วย Flexbox คุณสามารถ:

ย้อนกลับลำดับขององค์ประกอบภายใน Flexbox parent
รวมองค์ประกอบย่อยในคอลัมน์ (จำนวนคอลัมน์อาจแตกต่างกันไปขึ้นอยู่กับความสูงของลูกและพาเรนต์)
ระบุอัตราที่องค์ประกอบเติบโตหรือหดตัวในขณะที่ขนาดวิวพอร์ตเปลี่ยนแปลง
ควบคุมว่าองค์ประกอบจะย่อขนาดได้หรือไม่ โดยไม่คำนึงถึงประเภทหน่วยความกว้างที่ระบุ (สัมพัทธ์หรือแบบสัมบูรณ์)
เปลี่ยนลำดับขององค์ประกอบด้วย CSS (รวมกับข้อความค้นหาสื่อแล้วคุณจะพบความเป็นไปได้ที่ไร้ขีดจำกัดในโฟลว์ของคุณ)
สร้างการแจกแจงองค์ประกอบที่ซับซ้อนให้เท่ากันโดยมีที่ว่างรอบ ๆ หรือช่องว่างระหว่างกัน
สร้างองค์ประกอบ "คนทรยศ" ที่ไหลต่างกัน (ทุกคนไปทางซ้าย แต่ไปทางขวาหนึ่งคน บน/ล่าง... เป็นการโทรของคุณ)
และที่สำคัญที่สุด หลีกเลี่ยงแฮ็คเคลียร์ฟิกซ์ให้ดี!

ฉันเข้าใจดีว่า Flexbox นั้นยากในตอนเริ่มต้น ฉันคิดว่ามันง่ายกว่าที่จะเรียนรู้คุณสมบัติ CSS ที่ไม่เกี่ยวข้องสิบประการ มากกว่าห้าคุณสมบัติที่มีการพึ่งพาซึ่งกันและกัน อย่างไรก็ตาม ด้วยทักษะ CSS ในปัจจุบันของคุณ และอาจได้รับความช่วยเหลือเล็กน้อยจากบทความนี้ คุณจะได้เริ่มต้นตัวเองในจักรวาล CSS ใหม่

พื้นฐานของ Flexbox

แสดง

display เป็นหนึ่งในคุณสมบัติพื้นฐานที่สุดใน CSS และค่อนข้างสำคัญในบริบทของ Flexbox เนื่องจากใช้เพื่อกำหนดตัวห่อหุ้มแบบยืดหยุ่น

ค่า flex wrapper ที่เป็นไปได้มีสองค่า: flex และ inline-flex

ความแตกต่างระหว่างสองสิ่งนี้คือ display: flex wrapper ทำหน้าที่เหมือนองค์ประกอบบล็อกในขณะที่ display: inline-flex ทำหน้าที่เหมือน inline-block นอกจากนี้ องค์ประกอบ inline-flex จะเติบโตหากมีพื้นที่ไม่เพียงพอสำหรับเก็บลูก แต่นอกเหนือจากความแตกต่างเหล่านั้น พฤติกรรมของทั้งสองก็จะเหมือนกัน

ลองใช้โค้ดตัวอย่างด้านล่าง ลดความกว้างของวิวพอร์ตเมื่อ inline-flex ทำงาน และ… เลื่อน

ดู Pen Flexbox @Toptal - Parent - คุณสมบัติ `display` โดย DD (@Diegue) บน CodePen

 .wrapper { display: flex || inline-flex; }

ทิศทางแบบยืดหยุ่น

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

แถว (ค่าเริ่มต้น): จัดเรียงองค์ประกอบจากซ้ายไปขวา (แต่หากตั้งค่า RTL ไว้ จะเป็นการย้อนกลับ)
row-reverse: กลับลำดับขององค์ประกอบในการจำหน่ายแถว
คอลัมน์: จัดเรียงองค์ประกอบจากบนลงล่าง
column-reverse: ย้อน กลับคำสั่งขององค์ประกอบในการจัดตำแหน่งคอลัมน์

คำแนะนำ: ค่า column และ column-reverse สามารถใช้เพื่อสลับแกน ดังนั้นคุณสมบัติที่จะส่งผลต่อแกนนอนจะส่งผลต่อแกนตั้งแทน

ดู Pen Flexbox @Toptal - Parent - คุณสมบัติ `flex-direction` โดย DD (@Diegue) บน CodePen

 .wrapper { flex-direction: row || row-reverse || column || column-reverse; }

เฟล็กซ์ แรป

หากคุณตรวจสอบตัวอย่างโค้ดแรก คุณจะพบว่าองค์ประกอบย่อยไม่สแต็กโดยค่าเริ่มต้นภายใน flex wrapper นี่คือที่มา flex-wrap :

nowrap (ค่าเริ่มต้น): ป้องกันรายการในคอนเทนเนอร์แบบยืดหยุ่นจากการห่อ
ตัด: ตัด รายการตามต้องการเป็นหลายแถว (หรือหลายคอลัมน์ ขึ้นอยู่กับ flex-direction )
wrap-reverse: เช่นเดียวกับ wrap แต่จำนวนแถว (หรือคอลัมน์) เพิ่มขึ้นในทิศทางตรงกันข้ามเมื่อรายการถูกห่อ

ดู Pen Flexbox @Toptal - Parent - คุณสมบัติ `flex-wrap` โดย DD (@Diegue) บน CodePen

 .wrapper { flex-wrap: nowrap || wrap || wrap-reverse; }

การไหลแบบยืดหยุ่น

คุณสามารถรวมคุณสมบัติ flex-direction และ flex-wrap เป็นคุณสมบัติเดียว: flex-flow

 .wrapper { flex-flow: {flex-direction} {flex-wrap}; }

ปรับเนื้อหา

คุณสมบัตินี้ใช้เพื่อควบคุมการจัดตำแหน่งแนวนอนขององค์ประกอบย่อย:

flex-start (ค่าเริ่มต้น): องค์ประกอบถูกจัดชิดด้านซ้าย (คล้ายกับองค์ประกอบแบบอินไลน์ด้วย text-align: left )
flex-end: องค์ประกอบถูกจัดชิดขวา (คล้ายกับองค์ประกอบแบบอินไลน์ด้วย text-align: right )
center: องค์ประกอบถูกจัดกึ่งกลาง (คล้ายกับองค์ประกอบแบบอินไลน์ที่มี text-align: center )
ช่องว่างรอบ ๆ (ที่เวทมนตร์เริ่มต้น): ทุกองค์ประกอบจะแสดงผลด้วยพื้นที่ว่างรอบ ๆ แต่ละรายการเท่ากัน โปรดทราบว่าช่องว่างระหว่างสององค์ประกอบย่อยที่เรียงตามลำดับจะเป็นสองเท่าของช่องว่างระหว่างองค์ประกอบภายนอกสุดและด้านข้างของเสื้อคลุม
ช่องว่างระหว่าง: เช่นเดียวกับ space-around ยกเว้นองค์ประกอบจะถูกคั่นด้วยระยะห่างเดียวกันและจะ ไม่มี ช่องว่างใกล้กับขอบด้านใดด้านหนึ่งของเสื้อคลุม

หมายเหตุ: จำ flex-direction เมื่อตั้งค่าเป็น column หรือ column-reverse ให้สลับแกน หากมีการตั้งค่าอย่างใดอย่างหนึ่ง justify-content จะส่งผลต่อการจัดแนวแนวตั้ง ไม่ใช่แนวนอน

ดู Pen Flexbox @Toptal - Parent - คุณสมบัติ `justify-content` โดย DD (@Diegue) บน CodePen

จัดรายการ

คุณสมบัตินี้คล้ายกับ justify-content แต่บริบทของเอฟเฟกต์คือแถวแทนที่จะเป็นตัวห่อหุ้ม:

flex-start: องค์ประกอบถูกจัดแนวในแนวตั้งกับด้านบนของเสื้อคลุม
flex-end: องค์ประกอบถูกจัดแนวในแนวตั้งที่ด้านล่างของเสื้อคลุม
ศูนย์กลาง: องค์ประกอบถูกจัดกึ่งกลางในแนวตั้งภายในเสื้อคลุม (สุดท้ายแล้ว แนวทางปฏิบัติที่ปลอดภัยเพื่อให้บรรลุเป้าหมายนี้)
ยืด (ค่าเริ่มต้น): บังคับให้องค์ประกอบใช้ความสูงเต็ม (เมื่อใช้กับแถว) และความกว้างเต็ม (เมื่อใช้กับคอลัมน์) ของเสื้อคลุม
เส้นฐาน: จัดองค์ประกอบในแนวตั้งให้เข้ากับเส้นฐานที่แท้จริง

ดู Pen Flexbox @Toptal - Parent - คุณสมบัติ `align-items` โดย DD (@Diegue) บน CodePen

จัดเนื้อหา

คุณสมบัตินี้คล้ายกับ justify-content และ align-items แต่ทำงานในแกนตั้งและบริบทคือ wrapper ทั้งหมด (ไม่ใช่แถวเหมือนตัวอย่างก่อนหน้านี้) หากต้องการดูเอฟเฟกต์ คุณจะต้องมีมากกว่าหนึ่งแถว:

flex-start: แถวถูกจัดแนวในแนวตั้งกับด้านบน (เช่น เรียงซ้อนกันจากด้านบนของเสื้อคลุม)
flex-end: แถวถูกจัดแนวในแนวตั้งไปที่ด้านล่าง (เช่น เรียงซ้อนกันจากด้านล่างของเสื้อคลุม)
กึ่งกลาง: แถวอยู่กึ่งกลางในเสื้อคลุมในแนวตั้ง
ยืด (ค่าเริ่มต้น): โดยทั่วไป คุณสมบัตินี้จะขยายองค์ประกอบต่างๆ เพื่อใช้ความสูงแนวตั้งทั้งหมดของเสื้อคลุม อย่างไรก็ตาม หากคุณได้กำหนดความสูงเฉพาะขององค์ประกอบ ความสูงนั้นจะได้รับการพิจารณา และพื้นที่แนวตั้งที่เหลืออยู่ (ในแถวนั้น ใต้องค์ประกอบนั้น) จะว่างเปล่า
space-around: ทุกแถวจะแสดงด้วยช่องว่างรอบตัวตัวเองในแนวตั้งเท่ากัน (เช่น ด้านล่างและด้านบนตัวเอง) โปรดทราบว่าช่องว่างระหว่างสองแถวจึงเป็นสองเท่าของช่องว่างระหว่างแถวบนและแถวล่างกับขอบของกระดาษห่อ
ช่องว่างระหว่าง: เช่นเดียวกับ space-around ยกเว้นองค์ประกอบจะถูกคั่นด้วยระยะห่างเดียวกันและจะไม่มีช่องว่างที่ขอบด้านบนและด้านล่างของเสื้อคลุม

ดู Pen Flexbox @Toptal - Parent - คุณสมบัติ `align-content' โดย DD (@Diegue) บน CodePen

Flex Grow

คุณสมบัตินี้กำหนดสัดส่วนสัมพัทธ์ของพื้นที่ว่างที่องค์ประกอบควรใช้ ค่าควรเป็นจำนวนเต็ม โดยที่ 0 เป็นค่าดีฟอลต์

สมมติว่าคุณมีองค์ประกอบที่แตกต่างกันสองรายการในเครื่องห่อแบบยืดหยุ่นเดียวกัน หากทั้งคู่มีค่า flex-grow เท่ากับ 1 ทั้งคู่จะเติบโตเท่าๆ กันเพื่อแบ่งปันพื้นที่ว่างที่มีอยู่ แต่ถ้าค่าหนึ่งค่า flex-grow เป็น 1 และอีกค่าหนึ่งมีค่า flex-grow เป็น 2 ดังที่แสดงในตัวอย่างด้านล่าง ค่านี้ที่มีค่า flex-grow เป็น 2 จะใช้พื้นที่มากเป็นสองเท่าของค่าแรก

 .wrapper .elements { flex-grow: 1; /* Default 0 */ } .wrapper .elements:first-child { flex-grow: 2; }

ดู Pen Flexbox @Toptal - Children - คุณสมบัติ `flex-grow` โดย DD (@Diegue) บน CodePen

หดตัวแบบยืดหยุ่น

คล้ายกับ flex-grow คุณสมบัตินี้กำหนดว่าองค์ประกอบจะ "หดได้" หรือไม่ด้วยค่าจำนวนเต็ม คล้ายกับ flex-grow , flex-shrink ระบุปัจจัยการหดตัวของรายการ flex

ดู Pen Flexbox @Toptal - Children - คุณสมบัติ `flex-shrink` โดย DD (@Diegue) บน CodePen

 .wrapper .element { flex-shrink: 1; /* Default 0 */ }

พื้นฐานยืดหยุ่น

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

คำแนะนำ: flex-basis ไม่รองรับ calc() และ box-sizing: border-box ในทุกเบราว์เซอร์ ดังนั้นฉันขอแนะนำให้ใช้ width หากคุณต้องการใช้อย่างใดอย่างหนึ่งเหล่านี้ (โปรดทราบว่าคุณจะต้องตั้งค่า flex-basis: auto; ).

ดู Pen Flexbox @Toptal - Children - คุณสมบัติ `flex-basis` โดย DD (@Diegue) บน CodePen

 .wrapper .element { flex-basis: size || auto; /* Default auto */ }

เฟล็กซ์

คุณสามารถรวม flex-grow , flex-shrink และ flex-basis เข้าเป็นคุณสมบัติเดียว: flex ดังนี้:

 .wrapper { flex: {flex-grow} {flex-shrink} {flex-basis}; }

คำแนะนำ: หากคุณวางแผนที่จะใช้ flex ตรวจสอบให้แน่ใจว่าได้กำหนดค่าทุกค่า (แม้ว่าคุณต้องการใช้ค่าเริ่มต้น) เนื่องจากเบราว์เซอร์บางตัวอาจไม่รู้จัก (ข้อบกพร่องทั่วไปเกี่ยวข้องกับการไม่ได้กำหนดค่า flex-grow )

จัดตัวเอง

คุณสมบัตินี้คล้ายกับการ align-items แต่เอฟเฟกต์จะถูกนำไปใช้กับแต่ละองค์ประกอบ ค่าที่เป็นไปได้คือ:

flex-start: จัดแนวองค์ประกอบให้อยู่ในแนวตั้งด้านบนของเสื้อคลุม
flex-end: จัดองค์ประกอบในแนวตั้งที่ด้านล่างของเสื้อคลุม
กึ่งกลาง: จัดองค์ประกอบให้อยู่ตรงกลางในแนวตั้งในเสื้อคลุม (ในที่สุดก็เป็นวิธีง่ายๆ ในการบรรลุเป้าหมายนี้!)
ยืด (ค่าเริ่มต้น): ยืดองค์ประกอบเพื่อให้ครอบคลุมความสูงทั้งหมดของเสื้อคลุม (เมื่อใช้กับแถว) หรือความกว้างเต็มของเสื้อคลุม (เมื่อใช้กับคอลัมน์)
เส้นฐาน: ปรับแนวองค์ประกอบตามเส้นฐานที่แท้จริง

ดู Pen Flexbox @Toptal - Children - คุณสมบัติ `align-self` โดย DD (@Diegue) บน CodePen

คำสั่ง

Flexbox สามารถจัดลำดับรูปภาพใหม่ตามที่แสดงในตัวอย่างนี้

หนึ่งในสิ่งที่ดีที่สุดที่รวมอยู่ใน Flexbox คือความสามารถในการจัดลำดับองค์ประกอบใหม่ (โดยใช้คุณสมบัติการ order ) โดยไม่ต้องแก้ไข DOM หรือใช้ JavaScript วิธีการทำงานของคุณสมบัติ order นั้นง่ายมาก ในลักษณะเดียวกับที่ z-index ควบคุมลำดับการแสดงรายการ order จะควบคุมลำดับที่องค์ประกอบอยู่ในตำแหน่งภายในเสื้อคลุม นั่นคือองค์ประกอบที่มีมูลค่าการ order ต่ำกว่า (ซึ่งอาจเป็นค่าลบก็ได้) จะถูกจัดตำแหน่งก่อนองค์ประกอบที่มีมูลค่าการ order สูงกว่า

ดู Pen Flexbox @Toptal - Children - คุณสมบัติ `order` โดย DD (@Diegue) บน CodePen

 .wrapper .elements { order: 1; /* this one will be positioned second */ } .wrapper .elements:last-child { order: -1; /* this one will be positioned first */ }

ดึงมันทั้งหมดเข้าด้วยกัน: ตัวอย่างการใช้ Flexbox

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

ส่วนประกอบการจัดตำแหน่งแนวตั้ง

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

 .wrapper { display: flex; /* always present for Flexbox practices */ flex-direction: column; /* elements stack */ justify-content: center; /* now that flex-direction is a column, the axis are swapped so this centers the content vertically */ min-height: 100vh /* make sure wrapper is taller enough */ }

ดู Pen Flexbox @Toptal - การใช้งานจริงที่เราสามารถให้ได้ - การจัดตำแหน่งแนวตั้งโดย DD (@Diegue) บน CodePen

เลย์เอาต์ครึ่ง/ครึ่ง

เลย์เอาต์ "ครึ่ง/ครึ่ง" คือเลย์เอาต์เต็มความสูงที่มีสองคอลัมน์ โดยแต่ละคอลัมน์มีเนื้อหาอยู่กึ่งกลางแนวตั้ง โดยปกติแล้วจะใช้ "ครึ่งหน้าบน" (เช่น ก่อนที่ผู้ใช้จะเลื่อนลงมาหลังจากโหลดหน้าเว็บ)

การใช้เทคนิคแบบดั้งเดิมมากขึ้น คุณสามารถสร้างเลย์เอาต์นี้ด้วยองค์ประกอบแบบลอย (แต่ละความกว้าง 50%) การล้างการลอยตัวลงในเสื้อคลุม ("clearfix" :before และ :after , overflow: hidden หรือ <div> แปลกประหลาดด้วย clear: both; ในที่สุด) ทว่ามันเป็นงานหนักมากและผลลัพธ์ก็ไม่เสถียรเท่ากับที่ Flexbox มอบให้

ในข้อมูลโค้ดต่อไปนี้ คุณจะเห็นว่ามันง่ายเพียงใดในการตั้งค่าเลย์เอาต์และวิธีที่เด็ก ๆ กลายเป็นเครื่องห่อแบบ Flexbox เนื่องจากทุกอย่างจัดแนวในแนวตั้งเช่นกัน

กระดาษห่อหุ้มด้านนอก:

 .wrapper { display: flex; flex-direction: column; /* only for mobile */ }

เครื่องห่อภายใน:

 .inner-wrapper { flex-grow: 1; /* Allow the element to grow if there is available space */ flex-shrink: 1; /* Elements shrink at the same rate */ flex-basis: 100%; /* Elements will cover the same amount, if is possible the 100% of the width */ }

ดู Pen Flexbox @Toptal - การใช้งานจริงที่เราสามารถให้ได้ - ส่วน Half-bleed โดย DD (@Diegue) บน CodePen

ปุ่ม Navbar แบบเต็มความกว้าง

แถบนำทางแบบเต็มความกว้างจะกระจายช่องว่างเท่าๆ กันในแถวเดียวกันของรายการแถบนำทาง โดยไม่คำนึงถึงจำนวนองค์ประกอบ

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

Flexbox ทำให้สิ่งนี้ง่ายขึ้นมาก

คุณสมบัติห่อหุ้ม:

 .navbar { display: flex; }

ขยายคุณสมบัติของลูก:

 .navbar-item { flex-grow: 1; /* They will grow */ }

คุณสมบัติย่อยที่ไม่ครอบคลุม:

 .navbar-other { flex-grow: 0; // They won't grow }

ดู Pen Flexbox @Toptal - การใช้งานจริงที่เราให้ได้ - แถบนำทางปุ่มเต็มโดย DD (@Diegue) บน CodePen

Blurbs

คุณต้องติดตั้งชุดกล่องข้อมูลที่มีไอคอนและข้อความในโครงการต่างๆ กี่ครั้ง

การกระจายองค์ประกอบนี้ส่วนใหญ่มีประโยชน์ในการตลาดดิจิทัล แต่สามารถใช้อย่างอื่นในการพัฒนาซอฟต์แวร์ได้ ด้วยพลังของ Flexbox คุณสามารถตั้งค่าการจัดเรียงของเส้นตารางและจัดตำแหน่งองค์ประกอบได้ไม่ว่าจะมีกี่แบบก็ตาม

คุณสมบัติห่อหุ้ม:

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

คุณสมบัติย่อย:

 .blurb { flex-grow: 0; /* elements don't grow */ flex-shrink: 0; /* elements don't shrink in a flexible way */ flex-basis: auto; /* the width of the elements will be set by proportions in `width` due to flex-basis not support workaround */ width: calc(33.33% - 60px); /* calculate proportional width without space taken by padding (workaround for IE 11) */ }

สำหรับวิวพอร์ตแท็บเล็ตและมือถือ ความกว้างจะแตกต่างกันไประหว่าง 50% ถึง 100%

ดู Pen Flexbox @Toptal - การใช้งานจริงที่เราให้ได้ - Blurbs โดย DD (@Diegue) บน CodePen

ปรับปรุงความเข้ากันได้ข้ามเบราว์เซอร์

ไวยากรณ์สำหรับ Flexbox มีการเปลี่ยนแปลงหลายครั้งในเบราว์เซอร์เวอร์ชันต่างๆ นี่อาจเป็นปัญหาเมื่อใช้เลย์เอาต์กับ Flexbox และพยายามสนับสนุนเว็บเบราว์เซอร์รุ่นเก่า โดยเฉพาะ Internet Explorer เวอร์ชันเก่า

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

งานคำนำหน้ามีประโยชน์อย่างยิ่งในเรื่องนี้ ในการทำให้คำนำหน้ากฎ CSS เป็นแบบอัตโนมัติ คุณสามารถเลือกหนึ่งในเครื่องมือต่อไปนี้:

ทับทิม:

Autoprefixer Rails
คนกลาง Autoprefixer

โหนด js:

PostCSS Autoprefixer
Grunt Autoprefixer
อึก Autoprefixer

เริ่มสร้างเค้าโครงอัจฉริยะ

Flexbox เป็นเครื่องมือที่ยอดเยี่ยมในการเร่งความเร็ว ขัดเกลา และปรับขนาดงานของเรา ขีดจำกัดอยู่ในจินตนาการของผู้พัฒนาเท่านั้น

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

ดู Pen Flexbox @Toptal - สนามเด็กเล่น Flexbox โดย DD (@Diegue) บน CodePen

เปิดในหน้าต่างใหม่

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