สวัสดีฮับ!

เย็นวันหนึ่งที่ดี โดยไม่ได้บอกล่วงหน้าถึงสิ่งที่น่าสนใจ แชทของเราได้รับข้อเสนอจากผู้เขียนสิ่งพิมพ์ “แปลเทมเพลตมาร์กอัปที่ตอบสนองได้จริง 5 รายการเป็นโค้ด” ซึ่งเขาเขียนเมื่อฤดูใบไม้ผลิปี 2012 เพื่อเขียนบทความรีเมค แต่ใช้ FlexBox และคำอธิบายประกอบว่าอะไรและทำงานอย่างไร หลังจากมีข้อสงสัยบางประการ ความสนใจในการทำความเข้าใจข้อกำหนดให้ลึกซึ้งยิ่งขึ้นยังคงได้รับชัยชนะ และฉันก็นั่งลงเพื่อพิมพ์ตัวอย่างเดียวกันเหล่านั้นอย่างมีความสุข เมื่อเราดำดิ่งลงไปในบริเวณนี้ ความแตกต่างหลายอย่างเริ่มชัดเจน ซึ่งขยายไปสู่บางสิ่งที่มากกว่าแค่การออกแบบเลย์เอาต์ใหม่ โดยทั่วไป ในบทความนี้ ฉันต้องการพูดคุยเกี่ยวกับข้อกำหนดที่ยอดเยี่ยมที่เรียกว่า "CSS Flexible Box Layout Module" และแสดงบางส่วน คุณสมบัติที่น่าสนใจและตัวอย่างการใช้งาน ฉันขอเชิญทุกคนที่สนใจเข้าร่วมแฮ็ค

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

ส่วนทางเทคนิค

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

ดังนั้น. FlexBox มีองค์ประกอบหลักสองประเภท: Flex Container และองค์ประกอบ องค์ประกอบลูก- รายการเฟล็กซ์ ในการเริ่มต้นคอนเทนเนอร์ เพียงกำหนดผ่าน CSS ให้กับองค์ประกอบ จอแสดงผล: ดิ้น;หรือ จอแสดงผล: อินไลน์เฟล็กซ์;. ความแตกต่างระหว่าง flex และ inline-flex นั้นอยู่ที่หลักการของการโต้ตอบกับองค์ประกอบที่อยู่รอบๆ คอนเทนเนอร์เท่านั้น ซึ่งคล้ายกับ display: block; และจอแสดงผล: inline-block;, ตามลำดับ

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

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

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

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

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

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

คุณสมบัติอีกอย่างที่คล้ายกับก่อนหน้านี้คือ จัดตำแหน่งเนื้อหา. เป็นผู้เดียวที่รับผิดชอบในการจัดแนวเส้นทั้งหมดสัมพันธ์กับคอนเทนเนอร์ดิ้น มันจะไม่มีผลใดๆ หากรายการดิ้นครอบครองหนึ่งบรรทัด คุณสมบัติใช้ค่าที่แตกต่างกันหกค่า
ดิ้นเริ่มต้น: เส้นทั้งหมดถูกกดไปที่จุดเริ่มต้นของแกนกากบาท
ดิ้นปลาย: เส้นทั้งหมดถูกกดจนสุดแกนกากบาท
ศูนย์: เส้นแพ็คทั้งหมดจัดชิดกับศูนย์กลางของแกนกากบาท
ช่องว่างระหว่าง: เส้นจะกระจายจากขอบบนลงล่าง โดยเว้นช่องว่างระหว่างเส้น ขณะที่เส้นนอกสุดกดทับกับขอบของคอนเทนเนอร์
พื้นที่รอบ: เส้นมีการกระจายเท่าๆ กันทั่วทั้งคอนเทนเนอร์
ยืด(ค่าเริ่มต้น): เส้นถูกยืดออกเพื่อใช้พื้นที่ว่างทั้งหมด
คุณสามารถลองวิธีการทำงานของ align-items และ align-content ได้ในตัวอย่างนี้ ฉันนำเสนอคุณสมบัติทั้งสองนี้โดยเฉพาะในตัวเดียว เนื่องจากมีปฏิสัมพันธ์กันค่อนข้างแน่น โดยแต่ละคุณสมบัติทำงานของตัวเอง สังเกตว่าจะเกิดอะไรขึ้นเมื่อองค์ประกอบถูกวางบนบรรทัดเดียวหรือหลายบรรทัด

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

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

ดิ้นเติบโตในแหล่งข้อมูลหลายแห่งมีคำอธิบายที่ไม่ถูกต้องโดยสิ้นเชิง มันบอกว่ามันควรจะกำหนดอัตราส่วนของขนาดขององค์ประกอบในคอนเทนเนอร์ จริงๆแล้วสิ่งนี้ไม่เป็นความจริง คุณสมบัตินี้จะระบุปัจจัยการขยายขององค์ประกอบหากมี ที่ว่างในภาชนะ ตามค่าเริ่มต้น คุณสมบัตินี้มีค่าเป็น 0 สมมติว่าเรามีคอนเทนเนอร์ดิ้นที่มีความกว้าง 500px ภายในนั้นมีรายการดิ้นสองรายการ โดยแต่ละรายการมีความกว้างฐาน 100px ทำให้มีพื้นที่ว่างในคอนเทนเนอร์อีก 300px หากเราระบุ flex-grow: 2; สำหรับองค์ประกอบแรก และ flex-grow: 1; สำหรับองค์ประกอบที่สอง เป็นผลให้บล็อกเหล่านี้จะใช้ความกว้างที่มีอยู่ทั้งหมดของคอนเทนเนอร์ เฉพาะความกว้างของบล็อกแรกเท่านั้นที่จะเป็น 300px และบล็อกที่สองเพียง 200px เกิดอะไรขึ้น สิ่งที่เกิดขึ้นคือพื้นที่ว่าง 300px ในคอนเทนเนอร์ถูกกระจายระหว่างองค์ประกอบต่างๆ ในอัตราส่วน 2:1, +200px สำหรับอันแรก และ +100px สำหรับอันที่สอง นี่คือวิธีการทำงานจริงๆ

ที่นี่เราย้ายไปยังทรัพย์สินอื่นที่คล้ายคลึงกันได้อย่างราบรื่นนั่นคือ ดิ้นหดตัว. ค่าเริ่มต้นคือ 1 และยังตั้งค่าปัจจัยสำหรับการเปลี่ยนความกว้างขององค์ประกอบในทิศทางตรงกันข้ามเท่านั้น หากภาชนะมีความกว้าง น้อยมากกว่าผลรวมของความกว้างพื้นฐานขององค์ประกอบ คุณสมบัตินี้จะมีผล ตัวอย่างเช่น คอนเทนเนอร์มีความกว้าง 600px และค่าพื้นฐานขององค์ประกอบคือ 300px ให้องค์ประกอบแรก flex-shrink: 2; และองค์ประกอบที่สอง flex-shrink: 1; ตอนนี้เรามาลดขนาดคอนเทนเนอร์ลง 300px ดังนั้น ผลรวมของความกว้างขององค์ประกอบจึงมากกว่าคอนเทนเนอร์ 300px ความแตกต่างนี้กระจายในอัตราส่วน 2:1 ดังนั้นเราจึงลบ 200px จากบล็อกแรก และ 100px จากบล็อกที่สอง ขนาดใหม่ขององค์ประกอบคือ 100px และ 200px สำหรับองค์ประกอบที่หนึ่งและที่สอง ตามลำดับ หากเราตั้งค่า flex-shrink เป็น 0 เราจะป้องกันไม่ให้องค์ประกอบหดตัวเป็นขนาดที่เล็กกว่าความกว้างฐาน

อันที่จริง นี่เป็นคำอธิบายที่เรียบง่ายมากเกี่ยวกับวิธีการทำงานทั้งหมดเพื่อให้ชัดเจน หลักการทั่วไป. รายละเอียดเพิ่มเติมถ้าใครสนใจ Algorithm ก็อธิบายไว้ใน Spec ครับ

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

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

แค่นั้นแหละฉันก็เบื่อแล้ว! ยกตัวอย่าง!

เราแยกส่วนทางเทคนิคออกแล้ว ปรากฏว่ามันค่อนข้างยาว แต่คุณต้องเข้าใจก่อน ตอนนี้เราสามารถไปสู่การใช้งานจริงได้แล้ว
ในระหว่างการพัฒนา “เทมเพลตเค้าโครงที่ตอบสนองที่มีประโยชน์จริง ๆ ห้าแบบ” เหล่านั้น เราต้องแก้ไขสถานการณ์ทั่วไปที่นักพัฒนาพบค่อนข้างบ่อย ด้วย flexbox การใช้โซลูชันเหล่านี้จะง่ายขึ้นและยืดหยุ่นมากขึ้น
ลองใช้เค้าโครงที่ 4 เหมือนเดิมเพราะ... มันมีองค์ประกอบที่น่าสนใจที่สุด

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

Html ( พื้นหลัง: #ccc; min-height: 100%; font-family: sans-serif; display: -webkit-flex; display: flex; flex-direction: column; ) body ( ระยะขอบ: 0; การขยาย: 0 15px ; display: -webkit-flex; display: flex; flex-direction: column; flex: auto; ) .header ( width: 100%; max-width: 960px; min-width: 430px; Margin: 0 auto 30px; padding) : 30px 0 10px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box; ) .main ( ความกว้าง: 100%; ความกว้างสูงสุด : 960px; min-width: 430px; Margin: auto; flex-grow: 1; box-sizing: border-box; ) .footer ( พื้นหลัง: #222; width: 100%; max-width: 960px; min-width : 430px; สี: #eee; ระยะขอบ: อัตโนมัติ; การขยาย: 15px; ขนาดกล่อง: border-box; )

เนื่องจากเราระบุ flex-grow: 1 สำหรับ .main; โดยจะขยายจนเต็มความสูงที่มีอยู่ โดยกดส่วนท้ายลงไปที่ด้านล่าง ข้อดีในโซลูชันนี้คือส่วนท้ายสามารถมีความสูงไม่คงที่ได้

ตอนนี้เรามาวางโลโก้และเมนูในส่วนหัวกัน
.logo ( ขนาดตัวอักษร: 0; ระยะขอบ: -10px 10px 10px 0; display: flex; flex: none; align-items: center; ) .logo:before, .logo:after ( content: ""; display: block ; ) .logo:before ( พื้นหลัง: #222; ความกว้าง: 50px; ความสูง: 50px; ระยะขอบ: 0 10px 0 20px; รัศมีเส้นขอบ: 50%; ) .logo:after ( พื้นหลัง: #222; ความกว้าง: 90px; ความสูง : 30px; ) .nav ( ระยะขอบ: -5px 0 0 -5px; display: -webkit-flex; display: flex; flex-wrap: wrap; ) .nav-itm ( พื้นหลัง: #222; ความกว้าง: 130px; ความสูง: 50px; ขนาดตัวอักษร: 1.5rem; สี: #eee; การตกแต่งข้อความ: ไม่มี; ระยะขอบ: 5px 0 0 5px; จอแสดงผล: -webkit-flex; จอแสดงผล: ดิ้น; ปรับเนื้อหา: กึ่งกลาง; จัดรายการ: กึ่งกลาง; )

เนื่องจากส่วนหัวมี flex-wrap: wrap; และปรับเนื้อหา: ช่องว่างระหว่าง; โลโก้และเมนูกระจัดกระจายอยู่บนด้านต่างๆ ของส่วนหัว และหากมีพื้นที่ไม่เพียงพอสำหรับเมนู ก็จะย้ายไปอยู่ใต้โลโก้อย่างหรูหรา

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

กล่อง ( ขนาดตัวอักษร: 1.25rem; line-height: 1.5; รูปแบบตัวอักษร: ตัวเอียง; ระยะขอบ: 0 0 40px -50px; จอแสดงผล: -webkit-flex; จอแสดงผล: flex; flex-wrap: wrap; ปรับเนื้อหา: center; ) .box-base ( ขอบซ้าย: 50px; ดิ้น: 1 0 430px; ) .box-side ( ขอบซ้าย: 50px; ดิ้น: ไม่มี; ) .box-img ( ความกว้างสูงสุด: 100%; ความสูง : อัตโนมัติ; )

อย่างที่คุณเห็นสำหรับ .box-base ซึ่งเรามีชื่อเรื่องและข้อความ ฉันระบุความกว้างฐานด้วย ดิ้นพื้นฐาน: 430px;และห้ามใช้การหดตัวของบล็อกด้วย ดิ้น-หด: 0;. ด้วยการปรับเปลี่ยนนี้ เรากล่าวว่าเนื้อหาต้องมีความกว้างไม่ต่ำกว่า 430px และจากข้อเท็จจริงที่ว่าสำหรับ .box ฉันระบุ ดิ้นห่อ: ห่อ;ขณะที่แถบด้านข้างและเนื้อหาไม่พอดีกับคอนเทนเนอร์ กล่อง แถบด้านข้างจะตกอยู่ใต้เนื้อหาโดยอัตโนมัติ และทั้งหมดนี้โดยไม่ต้องใช้แอปพลิเคชัน @สื่อ! ฉันคิดว่านี่เจ๋งมากจริงๆ

เราเหลือเนื้อหาสามคอลัมน์ มีวิธีแก้ไขปัญหานี้หลายวิธี ฉันจะแสดงวิธีใดวิธีหนึ่ง ในเค้าโครงอื่น มีตัวเลือกอื่น
มาสร้างคอนเทนเนอร์ เรียกมันว่า .content และกำหนดค่ามันกันดีกว่า
.content ( ขอบด้านล่าง: 30px; จอแสดงผล: -webkit-flex; จอแสดงผล: flex; flex-wrap: wrap; )

คอนเทนเนอร์มีสามคอลัมน์ ได้แก่ .banners, .posts, .comments
.banners ( flex: 1 1 200px; ) .posts ( ระยะขอบ: 0 0 30px 30px; flex: 1 1 200px; ) .comments ( ระยะขอบ: 0 0 30px 30px; flex: 1 1 200px; )

ฉันให้ความกว้างฐานของคอลัมน์เป็น 200px เพื่อให้คอลัมน์ไม่แคบเกินไป แต่จะดีกว่าหากย้ายไปไว้ใต้กันตามต้องการ

ตามเค้าโครง เราจะไม่สามารถทำได้หากไม่มี @media ที่มีเนื้อหา ดังนั้นเรามาปรับพฤติกรรมของคอลัมน์เพื่อความกว้างอีกหน่อย<800px и <600px.
หน้าจอ @media และ (ความกว้างสูงสุด: 800px) ( .banners ( ขอบซ้าย: -30px; จอแสดงผล: -webkit-flex; จอแสดงผล: flex; flex-basis: 100%; ) .posts ( ขอบซ้าย: 0; ) ) หน้าจอ @media และ (ความกว้างสูงสุด: 600px) ( .content ( display: block; ) .banners ( Margin: 0; display: block; ) .comments ( Margin: 0; ) )

นั่นคือความมหัศจรรย์ทั้งหมดเมื่อพูดถึงการสร้างเลย์เอาต์บน FlexBox งานที่ฉันชอบอีกอย่างคือเลย์เอาต์ที่ 5 โดยเฉพาะที่เกี่ยวข้องกับการปรับเนื้อหา

เรามาดูกันว่าโพสต์นั้นถูกสร้างขึ้นในตารางสามตารางติดต่อกันอย่างไรด้วยความละเอียดเดสก์ท็อป เมื่อความกว้างของวิวพอร์ตน้อยกว่า 800px ตารางจะกลายเป็นคอลัมน์ที่มีโพสต์ โดยที่รูปภาพของโพสต์จะเรียงกันทางด้านซ้ายและด้านขวาของเนื้อหาโพสต์ สลับกัน และหากความกว้างน้อยกว่า 600px รูปภาพโพสต์จะถูกซ่อนไว้โดยสมบูรณ์
.grid ( จอแสดงผล: -webkit-flex; จอแสดงผล: flex; flex-wrap: wrap; justify-content: space-between; ) .grid-itm ( ขอบล่าง: 30px; flex-basis: calc(33.33% - 30px * 2/3); จอแสดงผล: -webkit-flex; จอแสดงผล: flex; flex-wrap: wrap; ) .grid-img ( ระยะขอบ: 0 อัตโนมัติ 20px; ดิ้น: 0 1 80%; ) .grid-cont( ดิ้น: 0 1 100%; ) .grid-title ( text-align: center; ) @media screen และ (max-width: 800px) ( .grid-itm ( flex-wrap: nowrap; flex-basis: 100%; ) . grid-img ( ดิ้น: 0 0 อัตโนมัติ; ) .grid-itm:nth-child(even) .grid-img ( ระยะขอบ: 0 0 0 30px; ลำดับ: 2; ) .grid-itm:nth-child(คี่) .grid-img ( ระยะขอบ: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title ( text-align: left; ) ) @media screen และ (max-width: 600px) ( .grid-img (แสดง: ไม่มี; ) )

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

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

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

หากต้องการให้องค์ประกอบกลายเป็นคอนเทนเนอร์ดิ้น จะต้องได้รับการกำหนด จอแสดงผล: ดิ้น;หรือ จอแสดงผล: อินไลน์เฟล็กซ์;(บล็อกหรือบรรทัดตามลำดับ)

ภายในคอนเทนเนอร์ดิ้นจะสร้างแกนสองแกน: แกนหลักและแกนตามขวางตั้งฉากกับแกนนั้น ขั้นแรก องค์ประกอบดิ้นจะจัดแนวตามแกนหลัก จากนั้นจึงจัดแนวตามแนวขวาง

คุณสมบัติคอนเทนเนอร์แบบยืดหยุ่น
ดิ้นทิศทาง	กำหนดทิศทางของแกนหลัก ค่าที่เป็นไปได้: แถว– จากซ้ายไปขวา (ค่าเริ่มต้น); แถวย้อนกลับ- จากขวาไปซ้าย คอลัมน์- จากบนลงล่าง; คอลัมน์ย้อนกลับ- ลงขึ้น
ดิ้นห่อ	กำหนดว่าคอนเทนเนอร์เป็นแบบหลายบรรทัดหรือไม่ ค่าที่เป็นไปได้: ตอนนี้แรป– องค์ประกอบดิ้นจะเรียงกันเป็นบรรทัดเดียว หากไม่พอดีกับคอนเทนเนอร์ องค์ประกอบเหล่านี้จะเกินขอบเขต (โดยค่าเริ่มต้น) ห่อ– องค์ประกอบดิ้นจะเรียงกันเป็นหลายบรรทัดหากไม่พอดีในบรรทัดเดียว ห่อกลับ- คล้ายกับ ห่อแต่การถ่ายโอนเกิดขึ้นจากล่างขึ้นบน
ดิ้นไหล	กำหนดพารามิเตอร์สองตัวพร้อมกัน: flex-direction และ flex-wrap ตัวอย่างเช่น flex-flow: การตัดคอลัมน์;
ปรับเนื้อหา	กำหนดการจัดตำแหน่งขององค์ประกอบตามแกนหลัก ค่าที่เป็นไปได้: ดิ้นเริ่มต้น– องค์ประกอบดิ้นถูกกดไปที่จุดเริ่มต้นของแกนหลัก (โดยค่าเริ่มต้น) ดิ้นปลาย– องค์ประกอบดิ้นถูกกดเข้ากับส่วนปลายของแกนหลัก ศูนย์– องค์ประกอบดิ้นจะจัดชิดกับศูนย์กลางของแกนหลัก ช่องว่างระหว่าง– องค์ประกอบดิ้นจะกระจายไปตามแกนหลัก โดยองค์ประกอบแรกกดไปที่จุดเริ่มต้นของแกน และองค์ประกอบสุดท้ายกดไปที่จุดสิ้นสุด พื้นที่รอบ– องค์ประกอบดิ้นจะกระจายไปตามแกนหลัก โดยมีพื้นที่ว่างแบ่งเท่าๆ กันระหว่างองค์ประกอบต่างๆ แต่เป็นที่น่าสังเกตว่าช่องว่างเพิ่มขึ้นและระยะห่างระหว่างองค์ประกอบนั้นใหญ่เป็นสองเท่าของระยะห่างระหว่างขอบของคอนเทนเนอร์กับองค์ประกอบด้านนอกสุด
จัดรายการ	กำหนดการจัดตำแหน่งขององค์ประกอบตามแกนขวาง ค่าที่เป็นไปได้: ดิ้นเริ่มต้น– องค์ประกอบดิ้นถูกกดไปที่จุดเริ่มต้นของแกนตามขวาง (โดยค่าเริ่มต้น) ดิ้นปลาย– องค์ประกอบดิ้นถูกกดลงบนปลายแกนตามขวาง ศูนย์– องค์ประกอบดิ้นจะจัดชิดกับศูนย์กลางของแกนตามขวาง พื้นฐาน– องค์ประกอบดิ้นจะจัดเรียงตามเส้นฐาน เส้นฐานเป็นเส้นจินตภาพที่วิ่งไปตามขอบด้านล่างของอักขระโดยไม่คำนึงถึงส่วนที่ยื่นออกมา เช่น ตัวอักษร "d", "r", "ts", "sch"; ยืด– องค์ประกอบดิ้นจะยืดออก โดยกินพื้นที่ว่างทั้งหมดตามแนวแกนตามขวาง แต่ถ้าองค์ประกอบมีความสูงที่กำหนดแล้ว ยืดจะถูกละเลย
จัดตำแหน่งเนื้อหา	กำหนดการจัดตำแหน่งข้ามแกนของทั้งแถวของรายการดิ้น ค่าที่เป็นไปได้: ดิ้นเริ่มต้น– แถวขององค์ประกอบดิ้นถูกกดไปที่จุดเริ่มต้นของแกนตามขวาง (โดยค่าเริ่มต้น) ดิ้นปลาย– แถวขององค์ประกอบดิ้นถูกกดทับกับปลายแกนตามขวาง ศูนย์– แถวขององค์ประกอบดิ้นอยู่ในแนวเดียวกับศูนย์กลางของแกนตามขวาง ช่องว่างระหว่าง– แถวขององค์ประกอบดิ้นจะกระจายไปตามแกนตามขวาง โดยแถวแรกกดไปที่จุดเริ่มต้นของแกน และแถวสุดท้ายจนถึงจุดสิ้นสุด พื้นที่รอบ– แถวขององค์ประกอบดิ้นจะกระจายไปตามแกนตามขวาง โดยมีพื้นที่ว่างแบ่งเท่าๆ กันระหว่างแถว แต่เป็นที่น่าสังเกตว่าช่องว่างเพิ่มขึ้นและระยะห่างระหว่างเส้นนั้นใหญ่เป็นสองเท่าของระยะห่างระหว่างขอบของคอนเทนเนอร์กับเส้นด้านนอกสุด ยืด– แถวขององค์ประกอบดิ้นถูกยืดออก โดยกินพื้นที่ว่างทั้งหมดตามแนวแกนตามขวาง แต่ถ้าองค์ประกอบมีความสูงที่กำหนดแล้ว ยืดจะถูกละเลย คุณสมบัตินี้ใช้ไม่ได้กับคอนเทนเนอร์ดิ้นบรรทัดเดียว

คุณสมบัติองค์ประกอบ Flex
คำสั่ง	กำหนดลำดับที่องค์ประกอบดิ้นเดียวปรากฏภายในภาชนะดิ้น ระบุเป็นจำนวนเต็ม ค่าเริ่มต้นคือ 0 จากนั้นองค์ประกอบต่างๆ จะติดตามกันในลำดับการไหลตามธรรมชาติ ความหมาย คำสั่งระบุน้ำหนักของตำแหน่งขององค์ประกอบในลำดับ แทนที่จะเป็นตำแหน่งสัมบูรณ์
ดิ้นพื้นฐาน	กำหนดขนาดฐานของรายการดิ้นก่อนที่จะจัดสรรพื้นที่ภายในคอนเทนเนอร์ สามารถระบุเป็น px, %, em และหน่วยวัดอื่นๆ ได้ โดยพื้นฐานแล้ว นี่เป็นจุดเริ่มต้นที่เกี่ยวข้องกับการยืดหรือบีบอัดองค์ประกอบ ค่าเริ่มต้น – อัตโนมัติโดยขนาดขององค์ประกอบขึ้นอยู่กับขนาดของเนื้อหาภายใน
ดิ้นเติบโต	กำหนดจำนวนพื้นที่ว่างภายในคอนเทนเนอร์ที่รายการ Flex จะเพิ่มลงในขนาดฐาน ระบุโดยจำนวนเต็มที่ทำหน้าที่เป็นสัดส่วน ค่าเริ่มต้นคือ 0 หากองค์ประกอบทั้งหมด ดิ้นเติบโต: 1จากนั้นทั้งหมดจะมีขนาดเท่ากัน หากคุณตั้งค่ารายการ Flex หนึ่งรายการเป็น 2 รายการดังกล่าวจะเพิ่มขนาดฐานเป็นสองเท่าของรายการอื่นๆ
ดิ้นหดตัว	กำหนดว่าหากมีพื้นที่ไม่เพียงพอ องค์ประกอบ Flex จะหดตัวเมื่อเทียบกับการลดองค์ประกอบข้างเคียงภายในคอนเทนเนอร์ Flex ระบุโดยจำนวนเต็มที่ทำหน้าที่เป็นสัดส่วน ค่าเริ่มต้นคือ 1 หากมีการตั้งค่าองค์ประกอบดิ้นหนึ่งรายการ ดิ้น-หด: 2จากนั้นจะถูกลบออกจากขนาดฐานเป็นสองเท่าหากคอนเทนเนอร์มีขนาดเล็กกว่าผลรวมของขนาดฐานขององค์ประกอบที่มีอยู่
ดิ้น	กำหนดพารามิเตอร์สามตัวพร้อมกัน: flex-grow, flex-shrink, flex-basis ตัวอย่างเช่น ดิ้น: 1 1 200px;
จัดตัวเอง	แทนที่การจัดตำแหน่งเริ่มต้นหรือ จัดรายการสำหรับองค์ประกอบดิ้นเฉพาะ ค่าที่เป็นไปได้: ดิ้นเริ่มต้น– องค์ประกอบดิ้นถูกกดไปที่จุดเริ่มต้นของแกนตามขวาง (โดยค่าเริ่มต้น) ดิ้นปลาย– องค์ประกอบดิ้นถูกกดเข้ากับส่วนปลายของแกนตามขวาง ศูนย์– องค์ประกอบดิ้นอยู่ในแนวเดียวกับศูนย์กลางของแกนตามขวาง พื้นฐาน– องค์ประกอบดิ้นอยู่ในแนวเดียวกันกับเส้นฐาน ยืด– องค์ประกอบดิ้นถูกยืดออก โดยกินพื้นที่ว่างทั้งหมดตามแนวแกนตามขวาง แต่ถ้าบอกส่วนสูงแล้ว ยืดจะถูกละเลย

คุณสมบัติของการใช้ Flexbox ในทางปฏิบัติ

1. การจัดตำแหน่งที่ถูกต้อง

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

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

ก่อนอื่น คุณต้องสร้างคอนเทนเนอร์หลักก่อน มาสร้างมันขึ้นมาเพื่อให้มีกรอบปรากฏขึ้นรอบๆ เพื่อความชัดเจน รหัส CSS สำหรับคอนเทนเนอร์จะเป็นดังนี้:

คอนเทนเนอร์ (
ความกว้าง:450px;
ความสูง:250px;
เส้นขอบ: 1px ทึบ #000000;
จอแสดงผล: ดิ้น;
ดิ้นห่อ: ห่อ;
จัดเนื้อหา: ยืด;
}

ทรัพย์สินหลักคือ จอแสดงผล:ดิ้น. เพื่อให้องค์ประกอบลูกถูกวางในหลายบรรทัด ให้เพิ่มคุณสมบัติ - flex-wrap: wrap

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

div คอนเทนเนอร์ (
ความกว้าง: 50px;
พื้นหลัง:สีเขียว;
ระยะขอบ:5px;
}

เราไม่ได้กำหนดความสูงไว้โดยเจตนา รหัส HTML มีลักษณะดังนี้:

ผลลัพธ์ของโค้ดจะแสดงในรูป

จะเกิดอะไรขึ้นหากคุณระบุความสูงของบล็อกด้วย:

div คอนเทนเนอร์ (
ความกว้าง: 50px;
ความสูง: 50px;
พื้นหลัง:สีเขียว;
ระยะขอบ:5px;
}

ทีนี้ลองลบความสูงและทำให้ความกว้างของบล็อกเท่ากับ 100%

div คอนเทนเนอร์ (
ความกว้าง: 100%;
พื้นหลัง:สีเขียว;
ระยะขอบ:5px;
}

เราเข้าใจแล้ว

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

คอนเทนเนอร์ (
ความกว้าง:450px;
ความสูง:250px;
เส้นขอบ: 1px ทึบ #000000;
จอแสดงผล: ดิ้น;
ดิ้นห่อ: ห่อ;
จัดเนื้อหา: กึ่งกลาง;
}
.คอนเทนเนอร์ div(
ความกว้าง: 50px;
ความสูง:50px;
พื้นหลัง:สีเขียว;
ระยะขอบ:5px;
}

ผลลัพธ์:

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

คอนเทนเนอร์ (
ความกว้าง:450px;
ความสูง:250px;
เส้นขอบ: 1px ทึบ #000000;
จอแสดงผล: ดิ้น;
ดิ้นห่อ: ห่อ;
จัดเนื้อหา: ดิ้นปลาย;
}

พารามิเตอร์ ดิ้นเริ่มต้นจะทำทุกอย่างตรงกันข้ามเลย

คอนเทนเนอร์ (
ความกว้าง:450px;
ความสูง:250px;
เส้นขอบ: 1px ทึบ #000000;
จอแสดงผล: ดิ้น;
ดิ้นห่อ: ห่อ;
จัดเนื้อหา: ดิ้นเริ่มต้น;
}

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

ส่วนหนึ่งของโค้ด CSS:

คอนเทนเนอร์ (
ความกว้าง:450px;
ความสูง:250px;
เส้นขอบ: 1px ทึบ #000000;
จอแสดงผล: ดิ้น;
ดิ้นห่อ: ห่อ;
จัดเนื้อหา: ช่องว่างระหว่าง;
}

ผลลัพธ์:

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

คอนเทนเนอร์ (
ความกว้าง:450px;
ความสูง:250px;
เส้นขอบ: 1px ทึบ #000000;
จอแสดงผล: ดิ้น;
ดิ้นห่อ: ห่อ;
จัดเนื้อหา: ช่องว่างรอบ;
}

ดังนั้นคุณสมบัติ css จัดตำแหน่งเนื้อหามีพารามิเตอร์มากมาย: ยืด, ดิ้น-เริ่มต้น, ดิ้น-end, ศูนย์กลาง, ช่องว่างระหว่าง, ช่องว่างรอบ

ดังที่คุณเห็นจากตัวอย่างข้างต้น โดยการเปลี่ยนพารามิเตอร์หนึ่งของคุณสมบัติ css align-content เราจะใช้การจัดตำแหน่งของบล็อก css โดยใช้เทคโนโลยีเฟล็กซ์ในรูปแบบที่แตกต่างกันโดยสิ้นเชิง รหัสนี้ใช้ไม่ได้กับ Internet Explorer จนถึงเวอร์ชัน 10

ในบทความนี้ เราจะแนะนำเทคโนโลยี CSS Flexbox ที่ออกแบบมาเพื่อสร้างเค้าโครงหน้าเว็บที่ยืดหยุ่น

วัตถุประสงค์ของ CSS Flexbox

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

CSS Flexbox ทำให้การสร้างการออกแบบที่ตอบสนองได้ง่ายกว่าการใช้ Float และ Positioning

Flexbox สามารถใช้ทั้งสำหรับมาร์กอัป CSS ของทั้งหน้าและแต่ละบล็อก

รองรับเบราว์เซอร์สำหรับ CSS Flexbox

CSS Flexbox ได้รับการสนับสนุนโดยเบราว์เซอร์สมัยใหม่ทั้งหมดที่ใช้งานอยู่ในปัจจุบัน (ใช้คำนำหน้า: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+) .

พื้นฐาน CSS Flexbox

การสร้างมาร์กอัป CSS โดยใช้ Flexbox เริ่มต้นด้วยการตั้งค่าคุณสมบัติการแสดง CSS ขององค์ประกอบ HTML ที่ต้องการให้เป็น flex หรือ flex-inline

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

เพิ่มคุณสมบัติคำนำหน้าและความกว้างสูงสุดใน CSS เพื่อรองรับเค้าโครงในเบราว์เซอร์ส่วนใหญ่

หากต้องการ “เปลี่ยน” บล็อกให้เป็นคอนเทนเนอร์ดิ้น ให้ใช้คลาสแถว การตั้งค่าความกว้างขององค์ประกอบ .col__article และ .col__aside flex ภายในคอนเทนเนอร์ flex ทำได้โดยใช้คุณสมบัติ flex CSS

ตามตัวอย่าง เรามามาร์กอัปส่วนท้ายอีกอันโดยใช้ flexbox และสร้างบล็อกที่ประกอบด้วยสามองค์ประกอบในองค์ประกอบ .col__article (ความกว้างขั้นต่ำขององค์ประกอบหนึ่งคือ 300px) เราจะวางสี่บล็อกไว้ในส่วนท้าย (ความกว้างขั้นต่ำของหนึ่งบล็อกคือ 200px)

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

ค่านิยม

.flex-item ( ลำดับ:<целое число>; }

รายการ Flex สามารถเรียงลำดับใหม่ได้โดยใช้คุณสมบัติแบบง่ายนี้โดยไม่ต้องเปลี่ยนโค้ด HTML

ค่าเริ่มต้น: 0.

ดิ้นเติบโต

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

ค่านิยม

.flex-รายการ (ดิ้นเติบโต:<число>; }

หากรายการ Flex ทั้งหมดมีค่า flex-grow เท่ากัน รายการทั้งหมดจะมีขนาดเท่ากันในคอนเทนเนอร์

รายการดิ้นรายการที่สองจะใช้พื้นที่มากขึ้นเมื่อเทียบกับขนาดของรายการดิ้นอื่นๆ

ค่าเริ่มต้น: 0.

ดิ้นหดตัว

flex-shrink ระบุปัจจัยการย่อขนาดที่กำหนดว่ารายการ Flex จะหดตัวมากน้อยเพียงใดเมื่อเทียบกับรายการ Flex อื่นๆ ในคอนเทนเนอร์ Flex เมื่อกระจายพื้นที่ว่างติดลบ

ค่านิยม

.flex-item ( ดิ้นหด:<число>; }

ตามค่าเริ่มต้น รายการ Flex ทั้งหมดสามารถย่อขนาดได้ แต่หากเราตั้งค่า Flex-shrink ให้เป็นศูนย์ (ไม่มีการย่อขนาด) รายการนั้นจะคงขนาดเดิมไว้

ค่าเริ่มต้น: 1.

ไม่อนุญาตให้ใช้ตัวเลขติดลบ

ดิ้นพื้นฐาน

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

ค่านิยม

.flex-item ( flex-basis: auto |<ширина>; }

มีการระบุ flex-basis สำหรับรายการดิ้นที่สี่และกำหนดขนาดเริ่มต้น

ค่าเริ่มต้น:อัตโนมัติ

ดิ้น

คุณสมบัตินี้เป็นชวเลขสำหรับคุณสมบัติ flex-grow, flex-shrink และ flex-basis ในบรรดาค่าอื่นๆ คุณยังสามารถตั้งค่าอัตโนมัติ (1 1 auto ) และไม่มี (0 0 auto )

ค่านิยม

.flex-item (ดิ้น: ไม่มี | อัตโนมัติ | [ ? || ]; }

ค่าเริ่มต้น: 0 1 อัตโนมัติ

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

จัดตัวเอง

คุณสมบัติ align-self ช่วยให้คุณสามารถแทนที่การจัดตำแหน่งเริ่มต้น (หรือค่าที่ระบุผ่าน align-items ) สำหรับรายการดิ้นแต่ละรายการ หากต้องการทำความเข้าใจค่าที่มีอยู่ โปรดดูคำอธิบายรายการจัดเรียงสำหรับคอนเทนเนอร์ Flex

ค่านิยม

.flex-item ( align-self: auto | flex-start | flex-end | center | baseline | ยืด; )

สำหรับองค์ประกอบดิ้นที่สามและสี่ การจัดตำแหน่งได้ถูกกำหนดใหม่ผ่านคุณสมบัติ align-self