สารบัญ:

คุณจะให้พื้นที่ใน Flex ได้อย่างไร?
คุณจะให้พื้นที่ใน Flex ได้อย่างไร?

วีดีโอ: คุณจะให้พื้นที่ใน Flex ได้อย่างไร?

วีดีโอ: คุณจะให้พื้นที่ใน Flex ได้อย่างไร?
วีดีโอ: EP.05 วิธีสร้าง Flex แนวนอน : ข้อความ รูปภาพ #flexmessage 2024, พฤศจิกายน
Anonim

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

ในทำนองเดียวกัน คุณวางตำแหน่งรายการแบบยืดหยุ่นได้อย่างไร

สรุป

  1. ใช้จอแสดงผล: ดิ้น; เพื่อสร้างคอนเทนเนอร์แบบยืดหยุ่น
  2. ใช้ justify-content เพื่อกำหนดการจัดตำแหน่งแนวนอนของรายการ
  3. ใช้ align-items เพื่อกำหนดการจัดตำแหน่งแนวตั้งของรายการ
  4. ใช้ flex-direction หากคุณต้องการคอลัมน์แทนแถว
  5. ใช้ค่าแบบย้อนกลับหรือแบบคอลัมน์เพื่อพลิกลำดับรายการ

นอกจากนี้ Flex fill คืออะไร? NS flex คอนเทนเนอร์ขยายรายการเป็น เติม พื้นที่ว่างที่มีอยู่หรือย่อขนาดเพื่อป้องกันไม่ให้ล้น ที่สำคัญที่สุด เลย์เอาต์ flexbox นั้นไม่เชื่อเรื่องทิศทางซึ่งต่างจากเลย์เอาต์ปกติ (บล็อกซึ่งอยู่ในแนวตั้งและอินไลน์ซึ่งเป็นแนวนอน)

พูดง่ายๆ ก็คือ ฉันสามารถใช้ปรับพื้นที่เนื้อหารอบๆ ได้หรือไม่

NS " ช่องว่าง -สม่ำเสมอ" ค่าสำหรับ ให้เหตุผล - เนื้อหา ทรัพย์สินจำหน่าย ช่องว่าง ระหว่างรายการอย่างเท่าเทียมกัน มันคล้ายกับ ช่องว่าง - รอบ ๆ แต่ให้เท่ากันแทนครึ่งขนาด ช่องว่าง บนขอบ สามารถ เป็น ใช้แล้ว ทั้งใน CSS flexbox & grid

การวางแนวเริ่มต้นภายในคอนเทนเนอร์แบบยืดหยุ่นคืออะไร

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

แนะนำ: