ขุดลงไปในคุณสมบัติการแสดงผล: สองค่าของการแสดงผล

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

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

บล็อกและองค์ประกอบแบบอินไลน์

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

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

ลักษณะการทำงานขององค์ประกอบบล็อกและอินไลน์เป็นพื้นฐานของ CSS และความจริงที่ว่าเอกสาร HTML ที่ทำเครื่องหมายไว้อย่างถูกต้องจะสามารถอ่านได้โดยค่าเริ่มต้น เลย์เอาต์นี้เรียกว่า “บล็อกและเลย์เอาต์อินไลน์” หรือ “โฟลว์ปกติ” เพราะนี่เป็นวิธีที่องค์ประกอบจะจัดวางเองถ้าเราไม่ทำอะไรกับพวกมัน

ค่าภายในและภายนอกของการ display

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

ปรากฎว่าเรามี ในระดับ 3 ของข้อกำหนดการแสดงผล ค่าของการ display ถูกกำหนดเป็นคำหลักสองคำ คีย์เวิร์ดเหล่านี้กำหนดค่าภายนอกของการแสดงผล ซึ่งจะเป็น inline หรือ block และกำหนดว่าองค์ประกอบทำงานอย่างไรในเลย์เอาต์ควบคู่ไปกับองค์ประกอบอื่นๆ พวกเขายังกำหนดค่าภายในขององค์ประกอบ - หรือลักษณะการทำงานของลูกโดยตรงขององค์ประกอบนั้น

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

ฉันคิดว่าวิธีคิดเกี่ยวกับ display นี้มีประโยชน์อย่างเหลือเชื่อ มันอธิบายโดยตรงว่าเรากำลังทำอะไรกับวิธีการเลย์เอาต์ต่างๆ หากคุณต้องระบุ display: inline flex คุณคาดหวังอะไร หวังว่ากล่องที่ทำหน้าที่เป็นองค์ประกอบแบบอินไลน์ กับเด็กที่มีความยืดหยุ่น

มีบางสิ่งที่อธิบายไว้อย่างดีโดยการคิดเกี่ยวกับ display ในรูปแบบใหม่นี้ และฉันจะพิจารณาสิ่งเหล่านี้บางส่วนในส่วนที่เหลือของบทความนี้

เราจะกลับไปสู่กระแสปกติเสมอ

เมื่อคิดถึงคุณสมบัติการแสดงผลภายในและภายนอกเหล่านี้ การพิจารณาว่าจะเกิดอะไรขึ้นหากเราไม่ยุ่งเกี่ยวกับคุณค่าของการแสดงผลเลย อาจช่วยได้ หากคุณเขียน HTML และดูในเบราว์เซอร์ สิ่งที่คุณได้รับคือ Block และ Inline Layout หรือ Normal Flow องค์ประกอบที่แสดงเป็นองค์ประกอบ block หรือ inline

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

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

อธิบาย flow-root และ inline-block

คุณค่าของ inline-block นั้นน่าจะคุ้นเคยกับพวกเราหลายคนที่ทำ CSS มาระยะหนึ่งแล้ว ค่านี้เป็นวิธีรับพฤติกรรมบล็อกบางส่วนในองค์ประกอบ inline ตัวอย่างเช่น องค์ประกอบ inline-block สามารถมีความกว้างและความสูงได้ องค์ประกอบที่มีการ display: inline-block ยังมีพฤติกรรมที่น่าสนใจในการสร้าง B ล็อค F ormatting C ontent (BFC)

BFC ทำสิ่งที่มีประโยชน์ในแง่ของเลย์เอาต์ เช่น มีโฟลต หากต้องการอ่านเกี่ยวกับบริบทการจัดรูปแบบบล็อกโดยละเอียด โปรดดูบทความก่อนหน้าของฉัน "การทำความเข้าใจเค้าโครง CSS และบริบทการจัดรูปแบบบล็อก" ดังนั้นการบอกว่า display: inline-block ให้กล่องอินไลน์ซึ่งสร้าง BFC ด้วย

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

• display: inline-block ให้ BFC แก่คุณในกล่องอินไลน์
• display: flow-root ให้ BFC แก่คุณในกล่องบล็อก

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

คุณค่าดั้งเดิมของการแสดงผล

ข้อมูลจำเพาะ CSS2 ให้รายละเอียดค่าต่อไปนี้สำหรับคุณสมบัติการ display :

• inline
• block
• inline-block
• list-item
• none
• table
• inline-table

นอกจากนี้ยังมีการกำหนดคุณสมบัติภายในตารางต่างๆ เช่น table-cell ซึ่งเราไม่ได้กล่าวถึงในบทความนี้

จากนั้นเราได้เพิ่มค่าบางส่วนเหล่านี้สำหรับการแสดงผล เพื่อรองรับการจัดวางแบบยืดหยุ่นและแบบกริด:

• grid
• inline-grid
• flex
• inline-flex

หมายเหตุ : ข้อกำหนดนี้ยังกำหนด ruby ​​และ inline-ruby เพื่อรองรับ Ruby Text ซึ่งคุณสามารถอ่านได้ในข้อกำหนดของ Ruby

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

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

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

เพื่ออธิบายวิธีการทำงาน เราสามารถคิดเกี่ยวกับคอนเทนเนอร์กริด ในโลกสองค่า เราจะสร้างคอนเทนเนอร์กริดระดับบล็อกด้วย:

 .container { display: block grid; }

อย่างไรก็ตาม คำหลักเดิมหมายความว่าสิ่งต่อไปนี้ทำสิ่งเดียวกัน:

 .container { display: grid; }

หากเราต้องการคอนเทนเนอร์กริดแบบอินไลน์แทน ในโลกสองค่า เราจะใช้:

 .container { display: inline grid; }

และถ้าใช้ค่าเดิม:

 .container { display: inline-grid; }

ตอนนี้เราสามารถกลับไปที่จุดเริ่มต้นของการสนทนาและดูที่ display: inline-block เมื่อดูที่ตาราง คุณจะเห็นว่าสิ่งนี้ถูกกำหนดในโลกสองค่าเป็น display: inline flow-root ตอนนี้มันตรงกับ display: flow-root ซึ่งจะ display: block flow-root จัดระเบียบเล็กน้อยและอธิบายว่าสิ่งเหล่านี้ถูกกำหนดอย่างไร การปรับโครงสร้าง CSS ใหม่หากต้องการ

การสนับสนุนเบราว์เซอร์สำหรับไวยากรณ์สองค่า

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

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