การจัดตำแหน่งกล่องด้วย css โดยใช้คอนเทนเนอร์แบบยืดหยุ่น ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับการจัดตำแหน่ง Flexbox รายการ Flex

โมดูลมาร์กอัป Flexbox ( จาก English Flexible Box - บล็อกแบบยืดหยุ่น) ซึ่งขณะนี้อยู่ในเวที “ คำแนะนำที่เป็นไปได้»มาตรฐาน W3C ( คำแนะนำผู้สมัคร W3C) มีเป้าหมายเพื่อให้เป็นวิธีที่มีประสิทธิภาพมากขึ้นในการทำเครื่องหมาย จัดเรียง และกระจายช่องว่างระหว่างองค์ประกอบในคอนเทนเนอร์ แม้ว่าจะไม่ทราบขนาดขององค์ประกอบและ/หรือกำหนดแบบไดนามิก ( จึงเรียกว่า "ยืดหยุ่น").

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

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

ที่สำคัญที่สุด เลย์เอาต์ Flexbox นั้นเป็นอิสระจากทิศทาง ต่างจากเลย์เอาต์ปกติ ( บล็อกที่วางแนวตั้งและองค์ประกอบอินไลน์ที่อยู่ในแนวนอน).

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

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

แนวคิดพื้นฐานและข้อกำหนด

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

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

โดยพื้นฐานแล้ว องค์ประกอบจะถูกวางตามแกนหลัก ( จากจุดเริ่มต้นสู่จุดสิ้นสุด) หรือตามแนวแกนตามขวาง ( จากจุดเริ่มต้นสู่จุดสิ้นสุด):

• แกนหลักคือแกนหลักของคอนเทนเนอร์แบบยืดหยุ่นตามที่วางรายการแบบยืดหยุ่น ระวัง ไม่จำเป็นต้องเป็นแนวนอน ตำแหน่งของมันขึ้นอยู่กับคุณสมบัติทิศทางโค้งงอ (ดูด้านล่าง)
• main-start | main-end - รายการแบบยืดหยุ่นจะอยู่ภายในคอนเทนเนอร์โดยเริ่มจากจุดเริ่มต้นหลักและถึงจุดสิ้นสุดหลัก
• ขนาดหลักคือความกว้างหรือความสูงของรายการแบบยืดหยุ่น ขึ้นอยู่กับขนาดหลัก คุณสมบัติขนาดหลักสามารถกำหนดความกว้างหรือความสูงได้
• แกนไขว้ - แกนไขว้ตั้งฉากกับแกนหลัก ทิศทางขึ้นอยู่กับทิศทางของแกนหลัก
• ข้ามเริ่มต้น | ครอสเอนด์ - เส้นดิ้นเต็มไปด้วยรายการและวางในภาชนะโดยเริ่มจากด้านข้ามไปทางด้านครอสเอนด์
• cross size - ความกว้างหรือความสูงของรายการ flex ขึ้นอยู่กับมิติที่เลือก คุณสมบัติสามารถมีค่าความกว้างหรือความสูงของมิติตามขวาง

คุณสมบัติคลาสพาเรนต์ (คอนเทนเนอร์แบบยืดหยุ่น)

แสดง

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

คอนเทนเนอร์ (จอแสดงผล: flex; / * หรือ inline-flex * /)

โปรดทราบว่าคอลัมน์ CSS ไม่มีผลในคอนเทนเนอร์แบบยืดหยุ่น

flex-direction

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

ลองนึกภาพรายการแบบยืดหยุ่นอยู่ในตำแหน่งหลักในคอลัมน์แนวนอนหรือแนวตั้ง:

คอนเทนเนอร์ (flex-direction: row | row-reverse | column | column-reverse;)

• แถว (ค่าเริ่มต้น): ซ้ายไปขวาสำหรับ ltr; ขวาไปซ้ายสำหรับ rtl;
• แถวย้อนกลับ: ขวาไปซ้ายสำหรับใน ltr; ซ้ายไปขวาสำหรับ rtl;
• คอลัมน์: เหมือนกับแถว แต่จากบนลงล่าง
• column-reverse: เหมือนกับ row-reverse แต่จากล่างขึ้นบน

flex-wrap

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

คอนเทนเนอร์ (flex-wrap: nowrap | wrap | wrap-reverse;)

• nowrap (ค่าเริ่มต้น): บรรทัดเดียว / จากซ้ายไปขวาสำหรับ ltr; ขวาไปซ้ายสำหรับ rtl;
• ห่อ: หลายบรรทัด / ซ้ายไปขวาสำหรับ ltr; ขวาไปซ้ายสำหรับ rtl;
• ห่อย้อนกลับ: หลายบรรทัด / ขวาไปซ้ายสำหรับ ltr; ซ้ายไปขวาสำหรับ rtl

flex-flow (ใช้กับพาเรนต์ของคอนเทนเนอร์ flex)

นี่คือรูปแบบย่อของคุณสมบัติ flex-direction และ flex-wrap ซึ่งร่วมกันกำหนดแกนหลักและแกนข้ามของคอนเทนเนอร์แบบยืดหยุ่น ค่าเริ่มต้นคือ row nowrap:

การไหลแบบยืดหยุ่น:<‘flex-direction’> || <‘flex-wrap’>

justify-เนื้อหา

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

คอนเทนเนอร์ (ปรับเนื้อหา: flex-start | flex-end | center | space-between | space-around;)

• flex-start (ค่าเริ่มต้น): รายการถูกจัดชิดกับจุดเริ่มต้นของบรรทัด
• flex-end: รายการถูกจัดชิดท้ายบรรทัด
• ศูนย์: รายการถูกจัดชิดกับกึ่งกลางของเส้น
• ช่องว่างระหว่าง: องค์ประกอบมีการกระจายอย่างสม่ำเสมอในบรรทัด: องค์ประกอบแรกตั้งอยู่ที่จุดเริ่มต้นของบรรทัดสุดท้าย - ที่ส่วนท้าย;
• space-around: รายการมีระยะห่างเท่ากันในบรรทัดที่มีระยะห่างเท่ากัน

จัดตำแหน่งรายการ

คุณสมบัตินี้กำหนดวิธีการวางตำแหน่งรายการแบบยืดหยุ่นตามค่าเริ่มต้นที่สัมพันธ์กับแกนตัดบนบรรทัดปัจจุบัน ถือได้ว่าเป็นเวอร์ชันข้ามแกนของ justify-content ( ตั้งฉากกับหลัก):

คอนเทนเนอร์ (align-items: flex-start | flex-end | center | baseline | stretch;)

• flex-start: เส้นขอบของรายการ cross-start อยู่บนเส้น cross-start
• flex-end: เส้นขอบของรายการ cross-start อยู่บนเส้น cross-end
• ศูนย์กลาง: รายการอยู่กึ่งกลางบนแกนไขว้
• พื้นฐาน: องค์ประกอบถูกจัดเรียงตามเส้นฐาน
• ยืด (ค่าเริ่มต้น): องค์ประกอบยืดเพื่อเติมภาชนะ ( พิจารณาค่าความกว้างต่ำสุด / ความกว้างสูงสุด).

align-content

คุณสมบัตินี้อนุญาตให้จัดแนวเส้นภายในคอนเทนเนอร์แบบยืดหยุ่นเมื่อมีที่ว่างบนแกนตัด คล้ายกับที่คุณสมบัติ justify-content จัดแนวแต่ละรายการกับแกนหลัก

หมายเหตุ: คุณสมบัตินี้จะไม่ทำงานหากมีรายการ flex เพียงแถวเดียว:

คอนเทนเนอร์ (จัดเนื้อหา: flex-start | flex-end | ศูนย์ | ช่องว่างระหว่าง | ช่องว่างรอบ ๆ | ยืด;)

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

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

(รายการดิ้น)

คำสั่ง

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

รายการ (คำสั่งซื้อ: ; }

flex-grow

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

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

รายการ (flex-grow: ; / * ค่าเริ่มต้น 0 * /)

flex-shrink

คุณสมบัตินี้ทำให้รายการ flex ย่อขนาดตามต้องการ:

รายการ (flex-shrink: ; / * ค่าเริ่มต้น 1 * /)

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

flex-basis

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

รายการ (Flex-พื้นฐาน: | อัตโนมัติ; / * ค่าเริ่มต้นเป็นอัตโนมัติ * /)

flex

คุณสมบัตินี้เป็นชวเลขสำหรับการรวมกันของ flex-grow, flex-shrink และ flex-basis พารามิเตอร์ที่สองและสาม (flex-shrink และ flex-basis) เป็นทางเลือก ค่าเริ่มต้น: 0 1 อัตโนมัติ:

รายการ (ดิ้น: ไม่มี | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

จัดตำแหน่งตัวเอง

คุณสมบัตินี้อนุญาตให้คุณแทนที่การจัดตำแหน่งเริ่มต้น ( หรือกำหนดโดยคุณสมบัติการจัดตำแหน่งรายการ) สำหรับรายการดิ้นแต่ละรายการ

ค่าที่มีอยู่สามารถพบได้ในคำอธิบายของคุณสมบัติการจัดตำแหน่ง:

รายการ (align-self: auto | flex-start | flex-end | center | baseline | stretch;)

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

ตัวอย่างของ

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

Parent (display: flex; height: 300px; / * Or Anything * /) .child (width: 100px; / * หรืออะไรก็ตาม * / height: 100px; / * หรืออะไรก็ตาม * / margin: auto; / * Magic ! * / )

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

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

เราอยากให้มันดี เว้นระยะห่างเท่าๆ กันตามแกนนอน เพื่อที่ว่าเมื่อหน้าต่างเบราว์เซอร์ถูกปรับขนาด ทุกอย่างก็ดูดี ( โดยไม่ต้องใช้สื่อแบบสอบถาม):

คอนเทนเนอร์แบบยืดหยุ่น (/ * ขั้นแรกให้สร้างบริบทเค้าโครง flex * / display: flex; / * จากนั้นกำหนดทิศทางการไหลและหากเราต้องการให้รายการถูกห่อ * จำไว้ว่าสิ่งนี้เหมือนกับ: * flex-direction : row; * flex-wrap: wrap; * / flex-flow: row wrap; / * ตอนนี้เรากำหนดวิธีการจัดสรรพื้นที่ที่เหลือ * / justify-content: space-around;)

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

HTML:

ซีเอสเอส:

คอนเทนเนอร์แบบยืดหยุ่น (padding: 0; ระยะขอบ: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around;). flex-item (พื้นหลัง: มะเขือเทศ; padding: 5px; width: 200px; ความสูง: 150px; margin-top: 10px; line-height: 150px; สี: สีขาว; font-weight: ตัวหนา; ขนาดตัวอักษร: 3em; text-align: center;)

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

ซีเอสเอส:

/ * หน้าจอขนาดใหญ่ * / .navigation (การแสดงผล: flex; flex-flow: row wrap; / * จัดรายการให้ท้ายบรรทัดตามแนวแกนหลัก * / justify-content: flex-end;) / * หน้าจอขนาดกลาง * / @media all และ (max-width: 800px) (.navigation (/ * สำหรับหน้าจอขนาดกลาง เราจัดองค์ประกอบให้อยู่ตรงกลางโดยกระจายพื้นที่ว่างระหว่างกัน * / justify-content: space-around;)) / * หน้าจอขนาดเล็ก * / @media all และ (max-width: 500px) (.navigation (/ * สำหรับหน้าจอขนาดเล็ก เราใช้ column-wise แทน row-wise * / flex-direction: column;))

HTML:

• บ้าน
• เกี่ยวกับเรา
• สินค้า
• รายชื่อผู้ติดต่อ

ซีเอสเอส:

การนำทาง (รูปแบบรายการ: ไม่มี; ระยะขอบ: 0; พื้นหลัง: deepskyblue; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit -flex-flow: row wrap; justify-content: flex-end;) .navigation a (text-decoration: none; display: block; padding: 1em; color: white;) .navigation a: hover (พื้นหลัง: ทำให้มืดลง ( deepskyblue, 2%)) @media all และ (max-width: 800px) (.navigation (justify-content: space-around;)) @media all และ (max-width: 600px) (.navigation (-webkit- flex-flow: การตัดคอลัมน์ flex-flow: การตัดคอลัมน์ การขยายข้อมูล: 0;) การนำทาง a (การจัดตำแหน่งข้อความ: กึ่งกลาง การเติม: 10px; border-top: 1px solid rgba (255,255,255,0.3); border-bottom: 1px solid rgba (0,0,0,0.1);) การนำทาง li: สุดท้ายของประเภท a (ขอบล่าง: ไม่มี;))

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

ซีเอสเอส:

Wrapper (จอแสดงผล: flex; flex-flow: row wrap;) / * ตั้งค่ารายการทั้งหมดเป็น 100% width * / .header, .main, .nav, .aside, .footer (flex: 1 100%;) / * In กรณีนี้เราอาศัยลำดับดั้งเดิมในการกำหนดเป้าหมายอุปกรณ์พกพา: * 1. ชื่อ * 2. การนำทาง * 3. เนื้อหา * 4. แถบด้านข้าง * 5. ส่วนท้าย * / / * หน้าจอขนาดกลาง * / @media ทั้งหมด และ (ความกว้างต่ำสุด : 600px) (/ * แถบด้านข้างทั้งสองอยู่ในบรรทัดเดียวกัน * / .aside (flex: 1 auto;)) / * หน้าจอขนาดใหญ่ * / @media all และ (min-width: 800px) (/ * กลับลำดับการแสดงผล แถบข้างแรกและส่วนเนื้อหาหลัก และบอกให้องค์ประกอบหลักใช้พื้นที่มากเป็นสองเท่าของแถบด้านข้างทั้งสอง * / .main (flex: 2 0px;) .aside-1 (คำสั่ง: 1;) .main (คำสั่ง : 2;) .aside-2 (คำสั่ง: 3;) .footer (คำสั่ง: 4;))

HTML:

ซีเอสเอส:

Wrapper (แสดง: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap ; font-weight: ตัวหนา; text-align: center;) .wrapper> * (padding: 10px; flex: 1 100%;) .header (พื้นหลัง: มะเขือเทศ;) .footer (พื้นหลัง: lightgreen;) .main (ข้อความ -align: left; background: deepskyblue;) .aside-1 (background: gold;) .aside-2 (background: hotpink;) @media all และ (min-width: 600px) (.aside (flex: 1 auto; )) @media all และ (min-width: 800px) (.main (flex: 2 0px;) .aside-1 (order: 1;) .main (order: 2;) .aside-2 (order: 3; ) .footer (คำสั่ง: 4;))

การใช้คำนำหน้า flexbox

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

นี่เป็นเพราะว่าข้อกำหนดของ flexbox มีการพัฒนาอยู่ตลอดเวลา ทำให้เกิดเวอร์ชัน "เก่า" "ทวีตเนอร์" และ "ใหม่"

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

อีกทางหนึ่งด้านล่างนี้คือวิธี Sass @mixin เพื่อขอความช่วยเหลือเกี่ยวกับคำนำหน้าซึ่งยังให้แนวคิดว่าควรดำเนินการอย่างไร:

เอสซีเอส:

@mixin flexbox () (แสดง: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;) @mixin flex ($ ค่า) (-webkit- box-flex: $ ค่า; -moz-box-flex: $ ค่า; -webkit-flex: $ ค่า; -ms-flex: $ ค่า; flex: $ ค่า;) @mixin สั่งซื้อ ($ val) (-webkit- box-ordinal-group: $ val; -moz-box-ordinal-group: $ val; -ms-flex-order: $ val; -webkit-order: $ val; order: $ val;) .wrapper (@include) flexbox ();) .item (@include flex (1 200px); @include order (2);)

รองรับเบราว์เซอร์

แบ่งตาม "เวอร์ชัน" ของ flexbox ออกเป็น:

• (ใหม่) - หมายถึงการสนับสนุนไวยากรณ์ล่าสุดจากข้อกำหนด (เช่น จอแสดงผล: ดิ้น;

  :: placeholder color pseudo-element (หรือในบางกรณี pseudo-class) ให้คุณระบุเนื้อหาข้อความขององค์ประกอบแบบฟอร์ม มันถูกตั้งค่าโดยใช้แอตทริบิวต์ตัวยึดตำแหน่ง: .

เนื้อหา:

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

UPD ตั้งแต่ 02.02.2017:สร้างแผ่นโกง flexbox ที่มีประโยชน์พร้อมการสาธิตสดและคำอธิบายจากข้อมูลจำเพาะ: Flexbox cheatsheet

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

อ้างอิงจาก caniuse.com Flexboxไม่รองรับโดย IE 8 และ 9 และ Opera Mini และคุณสมบัติบางอย่างอาจไม่รองรับในเบราว์เซอร์อื่นและ / หรือคำนำหน้า

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

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

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

มาเตรียมพื้นที่ทดสอบสำหรับการทดลองกันเถอะ:

บล็อกหลักหนึ่งบล็อก (สีเหลือง) และลูก 5 คน

จอแสดงผล: flex

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

จอแสดงผล: ดิ้น; ทำให้เด็กทุกคนมีความยืดหยุ่น - ดิ้น ไม่อินไลน์หรือบล็อกเหมือนเมื่อก่อน

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

แสดงคุณสมบัติสำหรับ Flexboxสามารถรับได้สองค่า:

flex - ทำตัวเหมือนองค์ประกอบบล็อก เมื่อคำนวณความกว้างของบล็อก เค้าโครงมีลำดับความสำคัญ (หากความกว้างของบล็อกไม่เพียงพอ เนื้อหาสามารถคลานออกจากเส้นขอบได้)

inline-flex - ทำงานเหมือน inline-block ลำดับความสำคัญของเนื้อหา (เนื้อหาขยายบล็อกให้มีความกว้างตามต้องการ เพื่อให้บรรทัดพอดีมากที่สุด)

ทิศทางการโค้งงอ

ทิศทางเค้าโครงของกล่องถูกควบคุมโดยคุณสมบัติ flex-direction

ค่าที่เป็นไปได้:

แถว - แถว (ค่าเริ่มต้น); แถวย้อนกลับ - แถวที่มีองค์ประกอบในลำดับที่กลับกัน คอลัมน์ - คอลัมน์; คอลัมน์ย้อนกลับ - คอลัมน์ที่มีองค์ประกอบในลำดับที่กลับกัน

แถวและแถวย้อนกลับ

คอลัมน์และคอลัมน์ย้อนกลับ

Flex-wrap

สามารถมีได้หลายบล็อคในหนึ่งบรรทัด การห่อหรือไม่นั้นถูกกำหนดโดยคุณสมบัติ flex-wrap

ค่าที่เป็นไปได้:

nowrap - บล็อกไม่ถูกห่อ (ค่าเริ่มต้น); ห่อ - บล็อกถูกห่อ; ห่อกลับ - บล็อกถูกห่อและวางในลำดับที่กลับกัน

ในการเขียนคุณสมบัติ flex-direction และ flex-wrap ในไม่ช้า มีคุณสมบัติ: flex-flow

ค่าที่เป็นไปได้: คุณสามารถตั้งค่าทั้งสองคุณสมบัติหรือเพียงค่าเดียว ตัวอย่างเช่น:

การไหลแบบยืดหยุ่น: คอลัมน์; การไหลแบบยืดหยุ่น: ห่อย้อนกลับ; flex-flow: ห่อแบบย้อนกลับคอลัมน์;

การสาธิตสำหรับการห่อแบบย้อนกลับแถว:

คำสั่ง

คุณสมบัติคำสั่งใช้เพื่อควบคุมลำดับของบล็อก

ค่าที่เป็นไปได้: ตัวเลข หากต้องการวางบล็อกก่อน ให้ตั้งค่าลำดับ: -1 เป็น:

Justify-เนื้อหา

มีคุณสมบัติหลายอย่างสำหรับการจัดแนวรายการ: justify-content, align-items และ align-self

justify-content และ align-items นำไปใช้กับคอนเทนเนอร์หลัก align-self กับลูก

justify-content มีหน้าที่ในการปรับให้เข้ากับแกนหลัก

ค่าที่เป็นไปได้สำหรับการปรับเนื้อหา:

flex-start - รายการถูกจัดตำแหน่งจากจุดเริ่มต้นของแกนหลัก (ค่าเริ่มต้น); flex-end - รายการถูกจัดตำแหน่งจากส่วนท้ายของแกนหลัก ศูนย์กลาง - รายการถูกจัดชิดกับศูนย์กลางของแกนหลัก ช่องว่างระหว่าง - องค์ประกอบถูกจัดเรียงตามแกนหลักโดยกระจายพื้นที่ว่างระหว่างกัน ช่องว่างรอบ ๆ - รายการถูกจัดแนวตามแกนหลัก กระจายพื้นที่ว่างรอบๆ

flex-start และ flex-end

ช่องว่างระหว่างอวกาศรอบ ๆ

จัดรายการ

align-items มีหน้าที่ในการจัดตำแหน่งแกนตั้งฉาก

ค่าที่เป็นไปได้สำหรับการจัดตำแหน่งรายการ:

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

ดิ้น-สตาร์ท ดิ้น-เอนด์

พื้นฐาน ยืด

จัดตัวเอง

align-self มีหน้าที่ในการจัดตำแหน่งแกนตั้งฉากด้วย แต่ถูกตั้งค่าเป็นรายการดิ้นแต่ละรายการ

ค่าการจัดตำแหน่งตัวเองที่เป็นไปได้:

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

จัดเนื้อหา

เมื่อต้องการควบคุมการจัดตำแหน่งภายในคอนเทนเนอร์ flex แบบหลายบรรทัด จะมีคุณสมบัติ align-content

ค่าที่เป็นไปได้:

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

ดิ้น-สตาร์ท ดิ้น-เอนด์

ตรงกลางยืด

ช่องว่างระหว่างอวกาศรอบ ๆ

ปล:บางสิ่งที่ฉันไม่สามารถมองเห็นได้จริงในการดำเนินการ เช่น line flex-flow: column wrap หรือบันทึกที่สมบูรณ์ของ flex-direction: column; flex-wrap: ห่อ; ...

องค์ประกอบถูกซ้อนกัน แต่ไม่ได้ดำเนินการ:

Wrap ไม่เริ่มทำงานเมื่อ flex-direction: คอลัมน์; แม้ว่าในสเป็คจะมีลักษณะดังนี้:

ฉันคิดว่ามันจะทำงานเมื่อเวลาผ่านไป

UPD ตั้งแต่ 06/21/2014:ทุกอย่างทำงานได้ถ้าคุณให้ความสูงของบล็อก ขอบคุณสำหรับทิป

โมดูล Flexbox Layout (Flexible Box) มีจุดมุ่งหมายเพื่อให้การจัดตำแหน่ง จัดตำแหน่ง และกระจายพื้นที่ว่างระหว่างรายการในคอนเทนเนอร์ได้อย่างมีประสิทธิภาพมากขึ้น แม้ว่าขนาดจะไม่เป็นที่รู้จักและ/หรือไดนามิกก็ตาม (ด้วยเหตุนี้คำว่า "flex")

แนวคิดพื้นฐานเบื้องหลังการจัดวางแบบยืดหยุ่นคือการทำให้คอนเทนเนอร์สามารถเปลี่ยนความกว้าง/ความสูง (และลำดับ) ของรายการได้ เพื่อที่จะเติมเต็มพื้นที่ว่างที่มีอยู่ได้ดีที่สุด (ส่วนใหญ่เพื่อให้พอดีกับหน้าจอทุกประเภทและทุกขนาด) คอนเทนเนอร์ flexbox จะขยายรายการเพื่อเติมพื้นที่ว่างหรือย่อขนาดเพื่อหลีกเลี่ยงการล้น

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

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

พื้นฐานและคำศัพท์

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

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

โดยพื้นฐานแล้วองค์ประกอบจะตั้งอยู่ตาม แกนหลัก(จากจุดเริ่มต้นหลักไปยังจุดสิ้นสุด) หรือ แกนตามขวาง(จากจุดเริ่มจนถึงจุดสิ้นสุด)

รองรับเบราว์เซอร์

โมดูลเค้าโครงกล่องแบบยืดหยุ่น CSS

Chrome สำหรับ Android

เบราว์เซอร์ Blackberry เริ่มตั้งแต่เวอร์ชัน 10 รองรับรูปแบบใหม่

คุณสมบัติสำหรับคอนเทนเนอร์

คุณสมบัติสำหรับองค์ประกอบ

คุณสมบัติสำหรับผู้ปกครอง (Flex Container)

แสดง

กำหนดคอนเทนเนอร์แบบยืดหยุ่น สตริงหรือบล็อกขึ้นอยู่กับค่าที่ส่งผ่าน รวมบริบทแบบยืดหยุ่นสำหรับเด็กโดยตรงทั้งหมด

คอนเทนเนอร์ (จอแสดงผล: flex; / * หรือ inline-flex * /)

โปรดทราบว่าคอลัมน์ CSS ไม่มีผลกับคอนเทนเนอร์แบบยืดหยุ่น

flex-direction

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

คอนเทนเนอร์ (flex-direction: row | row-reverse | column | column-reverse;)

• แถว (ค่าเริ่มต้น)- จากซ้ายไปขวาใน ltr; จากขวาไปซ้ายใน rtl;
• แถวย้อนกลับ- จากขวาไปซ้ายใน ltr; จากซ้ายไปขวาใน rtl;
• คอลัมน์- เช่นเดียวกับแถวจากบนลงล่างเท่านั้น
• คอลัมน์ย้อนกลับ- เช่นเดียวกับการกลับแถวจากล่างขึ้นบนเท่านั้น

flex-wrap

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

คอนเทนเนอร์ (flex-wrap: nowrap | wrap | wrap-reverse;)

• nowrap (ค่าเริ่มต้น)- รายการแบบยืดหยุ่นทั้งหมดจะอยู่ในบรรทัดเดียว
• ห่อ- รายการแบบยืดหยุ่นจะถูกวางในหลายบรรทัด จากบนลงล่าง
• ห่อกลับ- รายการแบบยืดหยุ่นจะถูกวางในหลายบรรทัด จากล่างขึ้นบน

justify-เนื้อหา

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

คอนเทนเนอร์ (ปรับเนื้อหา: flex-start | flex-end | center | space-between | space-around;)

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

จัดตำแหน่งรายการ

คุณสมบัตินี้กำหนดลักษณะการทำงานของรายการแบบยืดหยุ่นตามแกนตัดบนบรรทัดปัจจุบัน คิดซะว่า โอ้ แค่แกนตามขวาง (ตั้งฉากกับแกนหลัก)

คอนเทนเนอร์ (align-items: flex-start | flex-end | center | baseline | stretch;)

• ดิ้นเริ่มต้น -องค์ประกอบถูกวางไว้ที่จุดเริ่มต้นของแกนตามขวาง
• ปลายโค้งมน -องค์ประกอบถูกวางไว้ที่ส่วนท้ายของแกนตามขวาง
• ศูนย์กลาง -องค์ประกอบตั้งอยู่ตรงกลางของแกนตามขวาง
• พื้นฐาน- องค์ประกอบสอดคล้องกับเส้นฐาน
• ยืด (ค่าเริ่มต้น)- ยืดเพื่อเติมคอนเทนเนอร์ทั้งหมด (ยังคงคำนึงถึงความกว้างต่ำสุด / ความกว้างสูงสุด)

align-content

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

คอนเทนเนอร์ (จัดเนื้อหา: flex-start | flex-end | ศูนย์ | ช่องว่างระหว่าง | ช่องว่างรอบ ๆ | ยืด;)

• flex-start- เส้นจะอยู่ที่จุดเริ่มต้นของคอนเทนเนอร์
• flex-end- เส้นจะอยู่ที่ส่วนท้ายของภาชนะ
• ศูนย์กลาง- เส้นวางอยู่ตรงกลางของภาชนะ
• ช่องว่างระหว่าง- บรรทัดมีการกระจายเท่า ๆ กัน บรรทัดแรกอยู่ที่จุดเริ่มต้นของคอนเทนเนอร์ และบรรทัดสุดท้ายในตอนท้าย
• พื้นที่รอบ ๆ- เส้นมีการกระจายอย่างสม่ำเสมอโดยมีระยะห่างเท่ากัน
• ยืด (ค่าเริ่มต้น)- เส้นยืดตามความกว้างทั้งหมดเพื่อใช้พื้นที่ที่เหลือ

คุณสมบัติสำหรับเด็ก (รายการดิ้น)

คำสั่ง

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

รายการ (คำสั่งซื้อ: ; }

flex-grow

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

หากรายการทั้งหมดมีการตั้งค่า flex-grow เป็น 1 พื้นที่ว่างภายในคอนเทนเนอร์จะถูกกระจายอย่างเท่าเทียมกันในทุกรายการ หากองค์ประกอบหนึ่งมีค่าเป็น 2 องค์ประกอบนั้นจะใช้พื้นที่มากกว่าองค์ประกอบอื่นสองเท่า (อย่างน้อยก็จะพยายาม)

รายการ (flex-grow: ; / * ค่าเริ่มต้น 0 * /)

ไม่สามารถระบุตัวเลขติดลบได้

flex-basis

กำหนดขนาดเริ่มต้นขององค์ประกอบ ก่อนจัดสรรพื้นที่ที่เหลือ อาจเป็นความยาว (20%, 5rem ฯลฯ) หรือคีย์เวิร์ดก็ได้ คำหลักอัตโนมัติหมายความว่า "ดูเหมือนคุณสมบัติความกว้างหรือความสูงของฉัน" คีย์เวิร์ดเนื้อหาหมายความว่า "ขนาดขึ้นอยู่กับเนื้อหาขององค์ประกอบ" - คีย์เวิร์ดนี้ยังไม่ได้รับการสนับสนุนเป็นอย่างดี ดังนั้นจึงยากต่อการทดสอบ และยิ่งยากที่จะรู้ว่าสิ่งที่พี่น้องของมันคือเนื้อหาขั้นต่ำ เนื้อหาสูงสุด และเนื้อหาที่พอดี กำลังทำ.

รายการ (Flex-พื้นฐาน: | อัตโนมัติ; / * ค่าเริ่มต้นอัตโนมัติ * /)

หากตั้งค่าเป็น 0 พื้นที่เพิ่มเติมรอบๆ เนื้อหาจะไม่ถูกนับ หากตั้งค่าเป็นอัตโนมัติ พื้นที่เพิ่มเติมจะถูกจัดสรรตามค่า

flex

นี่คือชวเลขสำหรับ และ พารามิเตอร์ที่สองและสาม (flex-shrink และ flex-basis) เป็นทางเลือก ค่าเริ่มต้นคือ 0 1 อัตโนมัติ

รายการ (ดิ้น: ไม่มี | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

จัดตำแหน่งตัวเอง

คุณสมบัตินี้อนุญาตให้คุณแทนที่การจัดตำแหน่งเริ่มต้น (หรือชุดคุณสมบัติ) สำหรับรายการดิ้นแต่ละรายการ

โปรดดูคำอธิบายของคุณสมบัติเพื่อทำความเข้าใจค่าที่มีอยู่

รายการ (align-self: auto | flex-start | flex-end | center | baseline | stretch;) .item (align-self: auto | flex-start | flex-end | center | baseline | stretch;)

โปรดทราบว่าการลอยตัว แบบใส และแนวตั้งไม่มีผลต่อรายการแบบยืดหยุ่น

ตัวอย่างของ

มาเริ่มกันด้วยตัวอย่างที่ง่ายที่สุดที่แก้ปัญหาที่เกิดขึ้นเกือบทุกวัน: Perfect Centering มันไม่ง่ายเลยถ้าคุณใช้ Flexbox

ผู้ปกครอง (จอแสดงผล: flex; ความสูง: 300px;) .child (ความกว้าง: 100px; ความสูง: 100px; ระยะขอบ: อัตโนมัติ;)

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

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

Flex-container (แสดง: flex; flex-flow: การตัดแถว; justify-content: space-around;)

พร้อม! อย่างอื่นเป็นเพียงปัญหาการออกแบบเพียงเล็กน้อย ด้านล่างนี้เป็นตัวอย่างของ CodePen อย่าลืมไปที่นั่นและลองปรับขนาดหน้าต่างเพื่อดูว่าเกิดอะไรขึ้น

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

การนำทาง (การแสดงผล: flex; flex-flow: row wrap; justify-content: flex-end;) @media all และ (max-width: 800px) (.navigation (justify-content: space-around;)) @media all และ (ความกว้างสูงสุด: 500px) (.navigation (ทิศทางแบบยืดหยุ่น: คอลัมน์;))

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

Wrapper (จอแสดงผล: flex; flex-flow: row wrap;) .header, .main, .nav, .aside, .footer (flex: 1 100%;) @media all และ (min-width: 600px) (.aside (flex: 1 auto;)) @media all และ (min-width: 800px) (.main (flex: 2 0px;) .aside-1 (order: 1;) .main (order: 2;) .aside- 2 (คำสั่ง: 3;) .footer (คำสั่ง: 4;))

คุณสมบัติที่เกี่ยวข้อง

ข้อผิดพลาด

Flexbox นั้นไม่มีข้อผิดพลาดอย่างแน่นอน คอลเลกชันที่ดีที่สุดที่ฉันเคยเห็นมาจาก Flexbugs ของ Philip Walton และ Greg Whitworth นี่เป็นที่ที่โอเพ่นซอร์สเพื่อติดตามข้อบกพร่องทั้งหมด ดังนั้น ฉันคิดว่าควรโพสต์ลิงก์ไว้จะดีกว่า

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

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

โมดูล flexbox ช่วยให้คุณทำงานต่อไปนี้ให้สำเร็จ:

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

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

สำหรับรายการปัญหาโมดูลปัจจุบันและวิธีแก้ปัญหาข้ามเบราว์เซอร์ โปรดดูบทความของ Philip Walton

flexbox คืออะไร

รองรับเบราว์เซอร์

เช่น: 11.0, 10.0 -ms-
ไฟร์ฟอกซ์: 28.0, 18.0 -moz-
โครเมียม: 29.0, 21.0 -webkit-
ซาฟารี: 6.1 -webkit-
โอเปร่า: 12.1 -webkit-
iOS ซาฟารี: 7.0 -webkit-
โอเปร่ามินิ: 8
เบราว์เซอร์ Android: 4.4, 4.1 -webkit-
Chrome สำหรับ Android: 44

1. แนวคิดพื้นฐาน

ข้าว. 1. รุ่นเฟล็กซ์บ็อกซ์

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

แกนหลัก- แกนตามที่วางรายการดิ้น มันขยายออกไปในมิติหลัก

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

ขนาดหลัก) - ความกว้างหรือความสูงของคอนเทนเนอร์ flex หรือรายการ flex แล้วแต่ว่าจะอยู่ในมิติฐาน กำหนดขนาดฐานของคอนเทนเนอร์ flex หรือรายการ flex

แกนกากบาท- แกนตั้งฉากกับแกนหลัก มันขยายออกด้านข้าง

จุดเริ่มต้นและจุดสิ้นสุด- เส้นที่กำหนดด้านเริ่มต้นและด้านสิ้นสุดของแกนตัดรอบที่มีการวางรายการแบบยืดหยุ่น

ขนาดข้าม- ความกว้างหรือความสูงของคอนเทนเนอร์ดิ้นหรือรายการดิ้น แล้วแต่ว่าจะอยู่ในมิติตามขวาง เป็นมิติตามขวาง

ข้าว. 2. โหมดแถวและคอลัมน์

2. คอนเทนเนอร์แบบยืดหยุ่น

คอนเทนเนอร์แบบยืดหยุ่นจะตั้งค่าบริบทการจัดรูปแบบที่ยืดหยุ่นใหม่สำหรับเนื้อหา คอนเทนเนอร์แบบยืดหยุ่นไม่ได้เป็นคอนเทนเนอร์แบบบล็อก ดังนั้นคุณสมบัติ CSS เช่น แบบลอย แบบใส และการจัดแนวแนวตั้งจะไม่ทำงานสำหรับองค์ประกอบย่อย นอกจากนี้ คอนเทนเนอร์แบบยืดหยุ่นจะไม่ได้รับผลกระทบจากคุณสมบัติ column- * ซึ่งสร้างคอลัมน์ในข้อความและ :: first-line และ :: first-letter pseudo-elements

โมเดลเลย์เอาต์ flexbox เชื่อมโยงกับค่าเฉพาะในคุณสมบัติ CSS display ขององค์ประกอบ html พาเรนต์ที่มีกล่องย่อย ในการควบคุมองค์ประกอบโดยใช้โมเดลนี้ คุณต้องตั้งค่าคุณสมบัติการแสดงผลดังนี้:

คอนเทนเนอร์แบบยืดหยุ่น (/ * สร้างคอนเทนเนอร์ flex ระดับบล็อก * / display: -webkit-flex; display: flex;) Flex-container (/ * สร้างคอนเทนเนอร์ flex ระดับแถว * / display: -webkit-inline- ดิ้น แสดง: อินไลน์ดิ้น;)

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

ข้าว. 3. การจัดตำแหน่งรายการในแบบจำลองเฟล็กซ์บ็อกซ์

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

3. รายการยืดหยุ่น

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

• สำหรับรายการแบบยืดหยุ่น ค่าคุณสมบัติการแสดงผลจะถูกล็อค ค่าที่แสดง: บล็อกอินไลน์; และแสดง: ตารางเซลล์; ประเมินในการแสดงผล: บล็อก; ...
• ช่องว่างระหว่างรายการหายไป: จะไม่กลายเป็นรายการ flex ของตัวเอง แม้ว่าข้อความระหว่างรายการจะถูกรวมไว้ในรายการ flex ที่ไม่ระบุชื่อ เนื้อหาของรายการ flex ที่ไม่ระบุชื่อไม่สามารถกำหนดสไตล์ของตัวเองได้ แต่จะสืบทอด (เช่น การตั้งค่าฟอนต์) จากคอนเทนเนอร์แบบยืดหยุ่น
• ไอเท็ม flex ที่จัดตำแหน่งไว้อย่างแน่นอนจะไม่มีส่วนร่วมในเลย์เอาต์ของเลย์เอาต์ flex
• ฟิลด์ระยะขอบของรายการดิ้นที่อยู่ติดกันไม่ยุบ
• เปอร์เซ็นต์ระยะขอบและช่องว่างภายในคำนวณจากขนาดภายในของบล็อกที่บรรจุ
• ระยะขอบ: อัตโนมัติ; ขยายดูดซับพื้นที่เพิ่มเติมในมิติที่สอดคล้องกัน สามารถใช้เพื่อจัดแนวหรือขยายรายการดิ้นที่อยู่ติดกัน
• ขนาดต่ำสุดอัตโนมัติเริ่มต้นสำหรับรายการแบบยืดหยุ่นคือขนาดต่ำสุดของเนื้อหา นั่นคือ min-width: auto; ... สำหรับคอนเทนเนอร์แบบเลื่อน ขนาดต่ำสุดอัตโนมัติมักจะเป็นศูนย์

4. แสดงลำดับของรายการดิ้นและการวางแนว

เนื้อหาของคอนเทนเนอร์แบบยืดหยุ่นสามารถวางได้ในทิศทางใดก็ได้และในลำดับใดก็ได้ (การจัดลำดับรายการแบบยืดหยุ่นใหม่ภายในคอนเทนเนอร์จะส่งผลต่อการแสดงผลด้วยภาพเท่านั้น)

4.1. ทิศทางแกนหลัก: flex-direction

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

flex-direction
ค่า:
แถว	ค่าเริ่มต้นคือซ้ายไปขวา (ใน rtl ขวาไปซ้าย) รายการแบบยืดหยุ่นถูกจัดวางในบรรทัด ทิศทางเริ่มต้นหลักและสิ้นสุดหลักของแกนหลักสอดคล้องกับการเริ่มต้นอินไลน์และสิ้นสุดอินไลน์ของแกนอินไลน์
แถวย้อนกลับ	ทิศทางจากขวาไปซ้าย (ใน rtl จากซ้ายไปขวา) รายการแบบยืดหยุ่นจะวางในบรรทัดที่สัมพันธ์กับขอบด้านขวาของคอนเทนเนอร์ (ใน rtl - ซ้าย)
คอลัมน์	ทิศทางจากบนลงล่าง รายการแบบยืดหยุ่นจะจัดวางในคอลัมน์
คอลัมน์ย้อนกลับ	คอลัมน์ที่มีองค์ประกอบในลำดับย้อนกลับ จากล่างขึ้นบน
อักษรย่อ
สืบทอด

ข้าว. 4. คุณสมบัติ flex-direction สำหรับภาษาจากซ้ายไปขวา

ไวยากรณ์

Flex-container (แสดง: -webkit-flex; -webkit-flex-direction: row-reverse; display: flex; flex-direction: row-reverse;)

4.2. การควบคุมหลายบรรทัดของคอนเทนเนอร์แบบยืดหยุ่น: flex-wrap

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

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

ข้าว. 5. การควบคุมหลายบรรทัดด้วยคุณสมบัติ Flex-Wrap สำหรับภาษา LTR

ไวยากรณ์

คอนเทนเนอร์แบบยืดหยุ่น (แสดง: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap;)

4.3. ชวเลขสำหรับทิศทางและหลายบรรทัด: flex-flow

คุณสมบัตินี้ช่วยให้คุณกำหนดทิศทางของแกนหลักและแกนไขว้ ตลอดจนความสามารถในการห่อรายการแบบยืดหยุ่นข้ามหลายบรรทัด หากจำเป็น เป็นชวเลขสำหรับคุณสมบัติ flex-direction และ flex-wrap ค่าเริ่มต้น flex-flow: row nowrap; ... ทรัพย์สินไม่ได้รับมรดก

ไวยากรณ์

Flex-container (แสดง: -webkit-flex; -webkit-flex-flow: การตัดแถว; display: flex; flex-flow: การตัดแถว;)

4.4. แสดงลำดับของรายการดิ้น: สั่งซื้อ

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

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

ไวยากรณ์

Flex-container (แสดง: -webkit-flex; display: flex;) .flex-item (-webkit-order: 1; order: 1;)
ข้าว. 6. แสดงลำดับของรายการดิ้น

5. ความยืดหยุ่นของรายการดิ้น

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

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

5.1. การปรับขนาดที่ยืดหยุ่นด้วยคุณสมบัติเดียว: flex

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

ไวยากรณ์

Flex-container (แสดง: -webkit-flex; display: flex;) .flex-item (-webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px;)

5.2. อัตราการเติบโต: flex-grow

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

ข้าว. 7. การจัดการพื้นที่ว่างในแถบนำทางด้วย flex-grow

ไวยากรณ์

คอนเทนเนอร์แบบยืดหยุ่น (จอแสดงผล: -webkit-flex; จอแสดงผล: flex;) รายการแบบยืดหยุ่น (-webkit-flex-grow: 3; flex-grow: 3;)

5.3. อัตราส่วนการหดตัว: flex-shrink

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

ข้าว. 8. จำกัดรายการดิ้นให้แคบลงเป็นแถว

ไวยากรณ์

คอนเทนเนอร์แบบยืดหยุ่น (จอแสดงผล: -webkit-flex; จอแสดงผล: flex;) รายการแบบยืดหยุ่น (-webkit-flex-shrink: 3; flex-shrink: 3;)

5.4. ขนาดฐาน: flex-basis

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

ไวยากรณ์

คอนเทนเนอร์แบบยืดหยุ่น (จอแสดงผล: -webkit-flex; จอแสดงผล: flex;) รายการแบบยืดหยุ่น (-webkit-flex-basis: 100px; พื้นฐานแบบยืดหยุ่น: 100px;)

6. การจัดตำแหน่ง

6.1. การจัดแนวแกนหลัก: justify-content

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

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

ข้าว. 9. การจัดตำแหน่งรายการและการจัดสรรพื้นที่ว่างโดยใช้คุณสมบัติ Justify-Content

ไวยากรณ์

คอนเทนเนอร์แบบยืดหยุ่น (แสดง: -webkit-flex; -webkit-justify-content: flex-start; display: flex; justify-content: flex-start;)

6.2. การจัดแนวแกน: align-items และ align-self

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

6.2.1. จัดรายการ

จัดแนวรายการ flex รวมทั้งรายการ flex ที่ไม่ระบุชื่อ ตามแกนไขว้ ไม่สืบทอด.

ค่า:
flex-start
flex-end
ศูนย์กลาง
พื้นฐาน	ข้อมูลพื้นฐานของรายการแบบยืดหยุ่นทั้งหมดที่เกี่ยวข้องกับการจัดตำแหน่งจะเหมือนกัน
ยืด
อักษรย่อ	ตั้งค่าคุณสมบัติเป็นค่าเริ่มต้น
สืบทอด	รับค่าคุณสมบัติจากองค์ประกอบหลัก

ข้าว. 10. การจัดวางสิ่งของในภาชนะในแนวตั้ง

ไวยากรณ์

คอนเทนเนอร์แบบยืดหยุ่น (จอแสดงผล: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start;)

6.2.2. จัดตัวเอง

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

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

ข้าว. 11. จัดแนวรายการดิ้นแต่ละรายการ

ไวยากรณ์

Flex-container (จอแสดงผล: -webkit-flex; display: flex;) Flex-item (-webkit-align-self: center; align-self: center;)

6.3. การจัดแนวแถวของคอนเทนเนอร์แบบยืดหยุ่น: align-content

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

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

ข้าว. 12. การจัดแนวรายการแบบยืดหยุ่นหลายบรรทัด

ไวยากรณ์

Flex-container (จอแสดงผล: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-content: flex-end; display: flex; flex-flow: row wrap; align-content: flex-end ; ความสูง: 100px;)

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

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

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

คุณสมบัติที่ควบคุมการจัดตำแหน่ง

คุณสมบัติที่เราจะดูในคู่มือนี้มีดังนี้

• justify-content - ควบคุมการจัดตำแหน่งรายการทั้งหมดบนแกนหลัก
• align-items - ควบคุมการจัดตำแหน่งรายการทั้งหมดบนแกนไขว้
• align-self - ควบคุมการจัดตำแหน่งของรายการ flex แต่ละรายการบนแกนไขว้
• align-content - อธิบายในข้อมูลจำเพาะว่าด้วย "packing flex lines"; ควบคุมช่องว่างระหว่างเส้นงอบนแกนไขว้

นอกจากนี้เรายังจะค้นพบว่าสามารถใช้ระยะขอบอัตโนมัติสำหรับการจัดตำแหน่งใน flexbox ได้อย่างไร

บันทึก: คุณสมบัติการจัดตำแหน่งใน Flexbox ได้ถูกวางไว้ในข้อกำหนดของตนเอง - CSS Box Alignment Level 3 เป็นที่คาดว่าในที่สุดสเป็คนี้จะเข้ามาแทนที่คุณสมบัติตามที่กำหนดไว้ใน Flexbox Level One

แกนข้าม

คุณสมบัติ align-items และ align-self ควบคุมการจัดตำแหน่งของรายการ flex ของเราบนแกนไขว้ ลงคอลัมน์ถ้า flex-direction เป็นแถว และตามแนวแถวถ้า flex-direction เป็นคอลัมน์

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

เหตุผลที่รายการมีความสูงเท่ากันคือค่าเริ่มต้นของ align-items ซึ่งเป็นคุณสมบัติที่ควบคุมการจัดตำแหน่งบนแกนตัดขวาง ถูกตั้งค่าให้ยืดออก

เราสามารถใช้ค่าอื่นเพื่อควบคุมการจัดตำแหน่งรายการ:

• จัดตำแหน่งรายการ: flex-start
• จัดตำแหน่งรายการ: flex-end
• align-items: center
• จัดตำแหน่งรายการ: ยืด
• จัดตำแหน่งรายการ: พื้นฐาน

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

การจัดตำแหน่งหนึ่งรายการด้วย align-self

คุณสมบัติ align-items ตั้งค่าคุณสมบัติ align-self บนไอเท็ม flex ทั้งหมดเป็นกลุ่ม ซึ่งหมายความว่าคุณสามารถประกาศคุณสมบัติ align-self เพื่อกำหนดเป้าหมายรายการเดียวได้อย่างชัดเจน คุณสมบัติ align-self ยอมรับค่าเดียวกันทั้งหมดเป็น align-items บวกกับค่า auto ซึ่งจะรีเซ็ตค่าเป็นค่าที่กำหนดไว้ในคอนเทนเนอร์แบบยืดหยุ่น

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

การเปลี่ยนแกนหลัก

จนถึงตอนนี้ เราได้ดูพฤติกรรมเมื่อ flex-direction ของเราเป็นแถว และในขณะที่ทำงานในภาษาที่เขียนจากบนลงล่าง ซึ่งหมายความว่าแกนหลักวิ่งไปตามแถวในแนวนอน และการจัดแนวแกนไขว้ของเราจะย้ายรายการขึ้นและลง

ถ้าเราเปลี่ยนทิศทางการยืดหยุ่นของเราเป็นคอลัมน์ align-items และ align-self จะจัดตำแหน่งรายการไปทางซ้ายและขวา

คุณสามารถลองใช้สิ่งนี้ในตัวอย่างด้านล่าง ซึ่งมีคอนเทนเนอร์ flex ที่มี flex-direction: คอลัมน์ แต่อย่างอื่นจะเหมือนกับตัวอย่างก่อนหน้านี้ทุกประการ

การจัดแนวเนื้อหาบนแกนตัด - คุณสมบัติการจัดแนวเนื้อหา

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

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

คุณสมบัติ align-content ใช้ค่าต่อไปนี้:

• จัดเนื้อหา: flex-start
• จัดเนื้อหา: flex-end
• จัดเนื้อหา: center
• จัดเนื้อหา: ช่องว่างระหว่าง
• จัดเนื้อหา: ช่องว่างรอบ ๆ
• จัดเนื้อหา: ยืด
• align-content: เว้นวรรคเท่าๆ กัน (ไม่ได้กำหนดไว้ในข้อกำหนดของ Flexbox)

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

ลองใช้ค่าอื่นๆ เพื่อดูว่าคุณสมบัติ align-content ทำงานอย่างไร

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

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