Flexbox: กล่องที่ยืดหยุ่นนั้นใหญ่แค่ไหน?

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

การแสดงสินค้าแบบยืดหยุ่นเบื้องต้น

หากฉันมีชุดของรายการซึ่งมีความยาวของเนื้อหาที่เปลี่ยนแปลงได้ และตั้งค่าพาเรนต์ให้ display: flex รายการจะแสดงเป็นแถวและเรียงกันที่จุดเริ่มต้นของแกนนั้น ในตัวอย่างด้านล่าง สามรายการของฉันมีเนื้อหาเล็กน้อย และสามารถแสดงเนื้อหาของแต่ละรายการเป็นบรรทัดที่ไม่ขาดตอน มีช่องว่างที่ส่วนท้ายของคอนเทนเนอร์แบบยืดหยุ่นซึ่งรายการไม่เติบโตเนื่องจากค่าเริ่มต้นของ flex-grow คือ 0 ไม่เติบโต

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

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

ข้อกำหนดการกำหนดขนาด CSS Intrinsic และ Extrinsic

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

ขนาดที่ต้องการ

ขนาดที่ต้องการ ของกล่องคือขนาดที่กำหนดโดย width หรือ height หรือนามแฝงเชิงตรรกะสำหรับคุณสมบัติเหล่านี้ inline-size block-size โดยใช้:

 .box { width: 500px; }

หรือนามแฝงตรรกะ inline-size :

 .box { inline-size: 500px; }

คุณกำลังระบุว่าคุณต้องการให้กล่องของคุณมีความกว้าง 500 พิกเซล หรือ 500 พิกเซลในทิศทางอินไลน์

เนื้อหาขั้นต่ำ Size

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

ขนาดเนื้อหาสูงสุด

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

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

ขนาดหลัก ของรายการแบบยืดหยุ่นคือขนาดที่มีอยู่ในมิติหลัก หากคุณกำลังทำงานติดต่อกันเป็นภาษาอังกฤษ ขนาดหลักคือความกว้าง ในคอลัมน์ภาษาอังกฤษ ขนาดหลักคือความสูง

รายการยังมีขนาดหลักต่ำสุดและสูงสุดตามที่กำหนดโดย min-width min-height ในมิติหลัก

คำนวณขนาดของสินค้าแบบยืดหยุ่น

ตอนนี้เรามีคำศัพท์ที่กำหนดไว้แล้ว เราสามารถดูขนาดรายการแบบยืดหยุ่นของเราได้ ค่าเริ่มต้นของคุณสมบัติ flex มีดังนี้:

• flex-grow: 0
• flex-shrink: 1
• flex-basis: auto

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

ในขณะที่ถ้า flex-basis เป็น auto และ flex-grow: 1 จะมีการกระจายเฉพาะพื้นที่ว่างโดยคำนึงถึงขนาดของเนื้อหา

ในสถานการณ์ที่ไม่มีพื้นที่ว่าง เช่น เมื่อเรามีเนื้อหามากเกินกว่าจะใส่ในบรรทัดเดียวได้ ก็ไม่มีที่ว่างให้แจกจ่าย

นี่แสดงให้เราเห็นว่าการค้นหาความหมาย auto นั้นสำคัญมาก หากเราต้องการทราบว่า Flexbox ทำงานอย่างไรกับขนาดของกล่องของเรา ค่าของ auto จะเป็นจุดเริ่มต้นของเรา

กำหนดอัตโนมัติ

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

เราสามารถค้นหาข้อมูลเกี่ยวกับความหมาย auto เมื่อใช้เป็น flex-basis ในข้อกำหนด เงื่อนไขที่กำหนดไว้ข้างต้นควรช่วยเราวิเคราะห์คำชี้แจงนี้

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

ดังนั้นหาก flex-basis ของเราคือ auto , Flexbox จะดูที่คุณสมบัติขนาดหลักที่กำหนดไว้ เราจะมีขนาดหลักถ้าเราให้ width ของรายการดิ้นของเรา ในตัวอย่างด้านล่าง รายการทั้งหมดมีความกว้าง 110px ดังนั้นจึงใช้เป็นขนาดหลักเนื่องจากค่าเริ่มต้นสำหรับ flex-basis เป็นอัตโนมัติ

อย่างไรก็ตาม ตัวอย่างเริ่มต้นของเรามีรายการที่ไม่มีความกว้าง ซึ่งหมายความว่าขนาดหลักของรายการนั้นเป็น auto ดังนั้นเราจึงจำเป็นต้องย้ายไปยังประโยคถัดไป “หากค่านั้นเป็นค่าอัตโนมัติ ค่าที่ใช้จะเป็น content ”

ตอนนี้เราต้องดูว่าสเป็คบอกอะไรเกี่ยวกับคีย์เวิร์ดของ content นี่เป็นอีกค่าหนึ่งที่คุณสามารถใช้ได้ (ในเบราว์เซอร์ที่รองรับ) สำหรับ flex-basis ของคุณ ตัวอย่างเช่น:

 .item { flex: 1 1 content; }

ข้อกำหนดกำหนด content ดังต่อไปนี้:

“ระบุขนาดอัตโนมัติตามเนื้อหาของรายการแบบยืดหยุ่น (โดยทั่วไปจะเทียบเท่ากับขนาดเนื้อหาสูงสุด แต่มีการปรับเปลี่ยนเพื่อจัดการอัตราส่วนกว้างยาว ข้อจำกัดด้านขนาดที่แท้จริง และโฟลว์มุมฉาก”

ในตัวอย่างของเรา ด้วยรายการแบบยืดหยุ่นที่มีข้อความ เราสามารถละเว้นการปรับเปลี่ยนที่ซับซ้อนกว่าบางรายการและถือว่า content เป็นขนาดเนื้อหาสูงสุด

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

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

การแก้ไขความยาวที่ยืดหยุ่นได้

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

ขั้นแรก ให้เพิ่มขนาดหลักของรายการทั้งหมด และดูว่ามีขนาดใหญ่กว่าหรือเล็กกว่าพื้นที่ว่างในคอนเทนเนอร์หรือไม่

หากขนาดคอนเทนเนอร์ใหญ่กว่าจำนวนทั้งหมด เราจะพิจารณาปัจจัยการ flex-grow เนื่องจากเรามีพื้นที่สำหรับการเติบโต

หากขนาดคอนเทนเนอร์มีขนาดเล็กกว่าขนาดรวม เราจะพิจารณาปัจจัยการ flex-shrink ตามที่เราต้องการในการหดตัว

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

หากเราใช้ flex-shrink นี่จะรวมรายการใด ๆ ที่มี flex-shrink: 0 เราสามารถเห็นสิ่งที่เกิดขึ้นในขั้นตอนนี้ หากเราให้ชุดของรายการ flex ของเราเป็น flex-shrink factor ที่ 0 รายการจะถูกแช่แข็งในสถานะ max-content ดังนั้นอย่า flex และจัดเรียงตัวเองให้พอดีกับคอนเทนเนอร์

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

ปัจจัยการ flex-shrink จะถูกคูณด้วย ขนาดฐานภายใน ของสินค้า ในกรณีของเราคือขนาด max-content สิ่งนี้ให้ค่าในการลดพื้นที่ หากสิ่งของต่างๆ นำพื้นที่ออกไปตามปัจจัยการ flex-shrink เท่านั้น สิ่งของชิ้นเล็ก ๆ ก็อาจหายไปได้ โดยต้องเอาพื้นที่ทั้งหมดออก ในขณะที่สินค้าชิ้นใหญ่ยังคงมีพื้นที่ให้ย่อขนาด

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

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

หากคุณกำลังเติบโตจาก auto flex-basis จะถือว่าเป็นความกว้างหรือความสูงใดๆ ของไอเท็ม หรือขนาด max-content จากนั้นพื้นที่จะถูกกำหนดตามปัจจัย flex-grow โดยใช้ขนาดนั้นเป็นจุดเริ่มต้น

หากคุณกำลังย่อขนาดจาก auto ค่า flex-basis จะถือเป็นความกว้างหรือความสูงใดๆ ของรายการ หรือขนาด max-content ช่องว่างจะถูกลบออกตามขนาด flex-basis คูณด้วยปัจจัยการ flex-shrink ดังนั้นลบตามสัดส่วนกับขนาดเนื้อหาสูงสุดของรายการ

ควบคุมการเจริญเติบโตและการหดตัว

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

โดยการตั้งค่า flex-basis ของคุณเอง หรือกำหนดขนาดให้กับไอเท็มซึ่งจากนั้นใช้เป็น flex-basis base คุณจะควบคุมกลับจากอัลกอริทึม โดยบอก Flexbox ว่าคุณต้องการขยายหรือย่อขนาดจากขนาดเฉพาะนี้ คุณสามารถปิดการขยายหรือย่อขนาดทั้งหมดได้โดยการตั้งค่า flex-grow หรือ flex-shrink เป็น 0 อย่างไรก็ตาม ในประเด็นนี้ คุณควรที่จะใช้ความปรารถนาในการควบคุมรายการแบบยืดหยุ่นเพื่อตรวจสอบว่าคุณกำลังใช้วิธีการจัดวางที่ถูกต้องหรือไม่ หากคุณพบว่าตัวเองกำลังพยายามจัดเรียงรายการแบบยืดหยุ่นในสองมิติ คุณอาจเลือก Grid Layout ได้ดีกว่า

การดีบักขนาดปัญหาที่เกี่ยวข้อง

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

ช่องว่างแบบยืดหยุ่น

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

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

ห่อ

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