align-items: center คืออะไร? ค่า center ของ align-items จัดเรียง flex items ให้อยู่ กึ่งกลางของ Cross Axis (แกนตั้งฉากกับ Main Axis) เป็นหนึ่งในค่าที่ใช้บ่อยที่สุดสำหรับการจัดกึ่งกลางแนวตั้ง พฤติกรรมตาม flex-direction flex-direction Main Axis Cross Axis align-items

align-items: baseline คืออะไร? ค่า baseline ของ align-items จัดเรียง flex items ตาม Baseline ของข้อความบรรทัดแรก ทำให้ baseline ของข้อความในทุก item อยู่ในแนวเดียวกัน แม้ขนาดฟอนต์จะต่างกันก็ตาม Baseline คืออะไร? Baseline คือเส้นฐานที่ตัวอักษร ยืน อยู่ (ไม่รวมส่วนหางตัวอักษรเช่น g, j, p, q, y) การจ

flex-direction สำหรับกำหนดทิศทาง คุณสมบัติ flex-direction ระบุทิศทางของ Main Axis ซึ่งกำหนดว่า flex items จะเรียงตัวอย่างไร: แนวนอน (row) หรือแนวตั้ง (column) และลำดับปกติหรือกลับ ค่าทั้ง 4 ค่า ค่า ทิศทาง Main Axis Cross Axis row (default)

align-content: space-between คืออะไร? ค่า space-between ของ align-content จัดเรียง Flex Lines (บรรทัดทั้งหมด) โดยวางบรรทัดแรกชิดจุดเริ่มต้น Cross Axis บรรทัดสุดท้ายชิดจุดสิ้นสุด และกระจายบรรทัดกลางอย่างเท่าเทียม ไม่มีพื้นที่ว่างที่ขอบ เงื่อนไขการทำงาน display: flex + flex-wrap: wrap คอนเทนเนอ

Button Group คืออะไร? กลุ่มปุ่ม (Button Group) คือการจัดกลุ่มปุ่มหลายตัวติดกัน ไม่มีช่องว่างระหว่างกัน เหมือนเป็นองค์ประกอบเดียว ใช้สำหรับ Toolbar, Pagination, Filter tabs หรือ Action groups ตัวอย่างแบบคลาสสิก (Float) <!DOCTYPE html> <html> <head> <style> .btn {

align-content: stretch คืออะไร? ค่า stretch เป็น ค่าเริ่มต้น (default) ของ align-content ทำให้ Flex Lines (บรรทัดทั้งหมด) ยืดเต็มความสูง/กว้างของ Cross Axis โดยอัตโนมัติ เพื่อเติมเต็มพื้นที่ว่าง เงื่อนไขการทำงาน display: flex + flex-wrap: wrap คอนเทนเนอร์มีขนาด Cross Axis จำกัด (height สำหรับ

justify-content สำหรับการจัดแนวนอน คุณสมบัติ justify-content ควบคุมการกระจายพื้นที่ว่างบน Main Axis เมื่อ flex items ไม่ใช้พื้นที่ทั้งหมด สำหรับ flex-direction: row (default) จะควบคุมการจัด แนวนอน ตัวอย่าง: justify-content: center div { background-color: white; border: 2px solid #2196

align-content: center คืออะไร? ค่า center ของ align-content จัดกลุ่ม Flex Lines (บรรทัดทั้งหมด) ให้อยู่ กึ่งกลางของ Cross Axis พื้นที่ว่างจะถูกแบ่งเท่าๆ กันระหว่างขอบบนและขอบล่าง เงื่อนไขการทำงาน display: flex + flex-wrap: wrap คอนเทนเนอร์มีขนาด Cross Axis มากกว่าความสูง/กว้างรวมของทุกบรรทัด

align-items: flex-end คืออะไร? ค่า flex-end ของ align-items จัดเรียง flex items ชิด จุดสิ้นสุดของ Cross Axis (จุดท้ายของแกนตั้งฉาก) พฤติกรรมตาม flex-direction flex-direction Main Axis Cross Axis flex-end หมายถึง row (default) แนวนอน (ซ้า

align-items: stretch คืออะไร? ค่า stretch เป็น ค่าเริ่มต้น (default) ของ align-items ทำให้ flex items ยืดเต็มความสูง (Cross Axis) ของคอนเทนเนอร์ โดยอัตโนมัติ (ถ้า item ไม่มี height คงที่) เงื่อนไขการทำงาน Item ไม่มี height คงที่ (หรือ height: auto) Item ไม่มี align-self ที่ทับซ้อน Cross Axi

align-content คืออะไร? คุณสมบัติ align-content ควบคุมการจัดเรียง Flex Lines (บรรทัดของ items) บน Cross Axis เมื่อมีหลายบรรทัด (multi-line flex container) ทำงานร่วมกับ flex-wrap: wrap เงื่อนไขการทำงาน display: flex หรือ inline-flex flex-wrap: wrap หรือ wrap-reverse คอนเทนเนอร์มีขนาด Cross Ax

flex-flow คืออะไร? คุณสมบัติ flex-flow เป็น shorthand property ที่รวม flex-direction และ flex-wrap ไว้ในบรรทัดเดียว ช่วยเขียนโค้ดสั้นลงและอ่านง่ายขึ้น ไวยากรณ์ flex-flow: ; /* ค่าเริ่มต้น */ flex-flow: row nowrap; ตัวอย่างการใช้งาน div { background-color: white; border: 2px solid #

order คืออะไร? คุณสมบัติ order ใช้ควบคุม ลำดับการแสดงผล ของ flex items ภายในคอนเทนเนอร์เดียวกัน โดยไม่ต้องเปลี่ยนลำดับใน HTML ช่วยให้จัดเรียงเนื้อหาได้ยืดหยุ่นสำหรับ Responsive Design วิธีทำงาน ค่าเริ่มต้น: 0 ค่าตัวเลข: ลบได้ (-1, -2...), บวกได้ (1, 2...) items ที่มี order น้อยกว่า จะแสดงก่

flex-direction: column คืออะไร? ค่า column ของ flex-direction ทำให้ flex items เรียงตัว แนวตั้ง (Vertical) จาก บนลงล่าง Main Axis จะเป็นแนวตั้ง Cross Axis จะเป็นแนวนอน ลักษณะการทำงาน Main Axis: แนวตั้ง (Vertical) - บน → ล่าง Cross Axis: แนวนอน (Horizontal) - ซ้าย → ขวา justify-content: ควบค

flex คืออะไร? คุณสมบัติ flex เป็น shorthand property ที่รวม 3 คุณสมบัติของ flex item ไว้ในบรรทัดเดียว: flex-grow - อัตราส่วนการขยาย flex-shrink - อัตราส่วนการบีบ flex-basis - ขนาดเริ่มต้นก่อน grow/shrink ไวยากรณ์ flex: ; ตัวอย่าง: flex: 20 0 350px div { background-color: white;

flex-direction: row คืออะไร? ค่า row เป็นค่าเริ่มต้น (default) ของ flex-direction ทำให้ flex items เรียงตัว แนวนอน (Horizontal) จาก ซ้ายไปขวา ตามลำดับใน HTML (สำหรับ LTR languages) ลักษณะการทำงาน Main Axis: แนวนอน (Horizontal) - ซ้าย → ขวา Cross Axis: แนวตั้ง (Vertical) - บน → ล่าง justify-

justify-content คืออะไร? คุณสมบัติ justify-content ควบคุมการจัดเรียง flex items บน Main Axis (แกนหลัก) เมื่อ items ไม่ใช้พื้นที่ทั้งหมด ใช้สำหรับจัดชิดซ้าย ชิดขวา กึ่งกลาง หรือกระจายพื้นที่ว่าง ค่าทั้งหมด (7 ค่า) ค่า พฤติกรรม เหมาะสำหรับ flex-start

หลักการทำงาน ใช้ Relative Positioning บนคอนเทนเนอร์รูปภาพ และ Absolute Positioning บนปุ่ม พร้อม transform: translate(-50%, -50%) เพื่อจัดให้ปุ่มอยู่ กึ่งกลางพอดี ไม่ว่าขนาดปุ่มจะเป็นเท่าไหร่ เทคนิคสำคัญ: Centering ด้วย Transform .btn-centered { position: absolute; top: 50%; left: 50%; tran

flex-grow คืออะไร? คุณสมบัติ flex-grow กำหนด อัตราส่วนการขยายตัว ของ flex item เมื่อมีพื้นที่ว่างเหลือบน Main Axis ค่าตัวเลขแทน ส่วนแบ่ง ของพื้นที่ว่างที่ item นั้นจะได้รับ วิธีทำงาน ค่าเริ่มต้น: 0 (ไม่ขยาย) ค่าตัวเลขบวก: สัดส่วนของพื้นที่ว่าง คิดเป็นสัดส่วน: item_grow / sum_of_all_grow × พ

align-items คืออะไร? คุณสมบัติ align-items ควบคุมการจัดเรียง flex items บน Cross Axis (แกนตั้งฉากกับ Main Axis) ภายใน บรรทัดเดียว (single line) ทำงานร่วมกับ flex-direction ค่าทั้ง 5 ค่า ค่า พฤติกรรม Row (default) Column stretch (default)