CSS ทุ่นอธิบายโดยการขี่บันไดเลื่อน

หากคุณกระโดดขึ้นบันไดเลื่อนคุณก็สามารถเข้าใจได้อย่างรวดเร็ว

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

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

ฉันใช้เวลาส่วนตัวพยายามทำความเข้าใจเรื่องการลอยตัว ฉันอ่านบทความแล้วพูดว่า“ โอ้นี่สมเหตุสมผลแล้ว!” จากนั้นฉันจะกลับไปที่รหัสของฉันลองใช้งานและ…ล้มเหลว กลับไปที่กระดานวาดภาพ

ฉันจะทำให้ดีที่สุดเพื่อให้โชคชะตาแก่คุณ

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

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

ต้องเคารพเลนที่ผ่าน

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

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

นี่เป็นสถานการณ์จำลองเมื่อคุณไม่ได้ใช้งานแพลทเลย

เอาล่ะตอนนี้เรากำลังพูดถึง! ผู้คนแสดงความตระหนักในระดับหนึ่ง รักที่จะเห็นว่า

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

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

ลอยตัว: ซ้ายและขวา

การใช้ลอยสามารถแนะนำกระแสใหม่ได้ถึงสองกระแส: ซ้ายและขวา

และสิ่งนี้ทำให้การไหลขององค์ประกอบปกติซึ่งไม่มีค่าลอยตัวเติมลงในช่องว่างรอบองค์ประกอบเหล่านี้

ลอยช่วยให้คุณสร้างความสัมพันธ์ใหม่เหล่านี้ระหว่างกระแส

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

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

คุณสมบัติที่ชัดเจน

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

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

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

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

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

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

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

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

หากคุณชอบโพสต์นี้คุณอาจเพลิดเพลินไปกับคำอธิบายอื่น ๆ ของหัวข้อ CSS และจาวาสคริปต์ที่ท้าทายเช่นการวางตำแหน่ง Model-View-Controller และการโทรกลับ

และถ้าคุณคิดว่าสิ่งนี้อาจช่วยให้คนอื่นอยู่ในตำแหน่งเดียวกับคุณให้เป็น "หัวใจ"!

โพสต์นี้เดิมปรากฏบนบล็อก CodeAnalogies