คำแนะนำและเคล็ดลับ CSS Flexbox

CSS Flexbox ช่วยให้คุณสามารถจัดรูปแบบ HTML ของคุณได้อย่างง่ายดายอย่างที่คุณไม่เคยรู้มาก่อน ด้วย Flexbox คุณสามารถจัดแนวตั้งและแนวนอนได้อย่างง่ายดาย ชอบเสียงที่? ใช่ฉันก็เช่นกัน

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

มาดูข้อมูลเพิ่มเติมกันเลย

Flexbox

นี่คือรายการคุณสมบัติ Flexbox ที่สามารถใช้เพื่อวางตำแหน่งองค์ประกอบใน CSS:

CSS ที่สามารถนำไปใช้กับคอนเทนเนอร์

display: flexbox | inline-flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow:  ||  justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch;

CSS ที่สามารถนำไปใช้กับรายการ / องค์ประกอบในคอนเทนเนอร์

order: ; flex-grow: ; /* default 0 */ flex-shrink: ; /* default 1 */ flex-basis:  | auto; /* default auto */ flex: none | [  ? ||  ] align-self: auto | flex-start | flex-end | center | baseline | stretch;

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

Display Flex

display: flex;เพียงบอกเบราว์เซอร์ของคุณว่า "เฮ้ฉันต้องการใช้ Flexbox กับคอนเทนเนอร์นี้โปรด" การดำเนินการนี้จะเริ่มต้นกล่องนี้เป็นคอนเทนเนอร์ Flex และใช้คุณสมบัติ Flex เริ่มต้นบางอย่าง

นี่คือลักษณะของคอนเทนเนอร์ของเราโดยไม่มีdisplay: flex;:

CSS playground ไม่มีคุณสมบัติแบบยืดหยุ่น

หลังจากเพิ่มแล้วdisplay: flex;เราจะได้รับข้อมูลด้านล่าง - คุณจะเห็นว่ามีการใช้คุณสมบัติ Flex เริ่มต้นทำให้มีลักษณะดังนี้:

CSS playground แสดงรูปแบบเริ่มต้นที่ยืดหยุ่น

ทิศทาง Flex

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

Flexbox ใช้แถวเป็นค่าเริ่มต้นสำหรับทิศทาง นี่คือสิ่งที่พวกเขาทั้งหมดดูเหมือน:

flex-direction: row;

ทิศทางดิ้น: แถว;  ตัวอย่าง

flex-direction: row-reverse;

flex-direction: row-reverse ตัวอย่าง

flex-direction: column;

ทิศทางดิ้น: ตัวอย่างคอลัมน์

flex-direction: column-reverse;

flex-direction: คอลัมน์ย้อนกลับตัวอย่าง

ห่อ Flex

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

มี 3 คุณสมบัติสำหรับflex-wrap::

flex-wrap: nowrap เป็นค่าเริ่มต้นและจะพยายามใส่ทุกอย่างในแถวเดียวจากซ้ายไปขวา

flex-wrap: wrap อนุญาตให้รายการต่างๆสร้างหลายแถวจากซ้ายไปขวา

flex-wrap: wrap-reverse อนุญาตให้รายการอยู่ในหลายแถว แต่จะแสดงจากขวาไปซ้ายในครั้งนี้

Flex Flow

Flex Flow รวมการใช้flex-wrapและflex-directionเป็นคุณสมบัติเดียว ใช้โดยกำหนดทิศทางก่อนแล้วจึงห่อ

flex-flow: column wrap; เป็นตัวอย่างหากจะใช้สิ่งนี้

จัดเนื้อหา

justify-content เป็นคุณสมบัติที่จัดแนวรายการในคอนเทนเนอร์ตามแกนหลัก (การเปลี่ยนแปลงนี้ขึ้นอยู่กับวิธีแสดงเนื้อหา)

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

flex-start | flex-end | center | space-between | space-around;นี่คือตัวเลือกของเรามีเมื่อเราปรับเนื้อหาของเรา:

จัดแนวรายการ

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

align-items: flex-start | flex-end | center | baseline | stretch;

จัดแนวเนื้อหา

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

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

แหล่งข้อมูลอื่น ๆ บน Flexbox และ Grid

บทความและหลักสูตร

สุดยอดสูตร CSS Flex

หลักสูตรวิดีโอ CSS แบบเต็ม (รวม Flexbox และ Grid)

คู่มือภาพสำหรับ CSS Flexbox

วิธีสร้างแกลเลอรีรูปภาพด้วย CSS Grid

เกมและแอพ

Flexbox Defense เป็นเกมบนเว็บที่สอนวิธีที่สนุกของ Flexbox

Flexbox Froggy ยังเป็นเกมบนเว็บที่สอนวิธีที่สนุกกับ Flexbox

Flexbox in 5 เป็นเว็บแอปที่ช่วยให้คุณสามารถดูว่า Flexbox ทำงานอย่างไรด้วยการควบคุมง่ายๆเพียงไม่กี่อย่าง

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

Flexbox Patters เป็นเว็บไซต์ที่แสดงตัวอย่าง Flexbox มากมาย

วิดีโอ

สิ่งสำคัญของ Flexbox

ตัวอย่างการปฏิบัติ Flexbox

Flexbox คืออะไร!