บทความนี้สาธิตวิธีจัดข้อความในแนวตั้งภายในเฟล็กซ์บ็อกซ์:
วิธีที่ 1: การใช้คุณสมบัติ 'จัดเรียงรายการ'
ในการจัดข้อความในแนวตั้ง ผู้ใช้สามารถใช้ปุ่ม “ จัดรายการ ” คุณสมบัติที่จัดทำโดย CSS ช่วยให้องค์ประกอบจัดแนวภายในเฟล็กซ์บ็อกซ์ ตำแหน่งการจัดแนวแนวตั้งที่เป็นไปได้สามารถอยู่ที่ ' สูงสุด ”, กลาง ', หรือ ' ด้านล่าง ' ด้านข้าง.
การสาธิตเชิงปฏิบัติสำหรับการจัดตำแหน่งองค์ประกอบในทิศทางเหล่านี้ระบุไว้ด้านล่าง:
ตัวอย่างที่ 1: ตำแหน่งสูงสุด
ในการจัดตำแหน่งข้อความภายในเฟล็กซ์บ็อกซ์ให้อยู่ในตำแหน่งบนสุด ให้กดปุ่ม “ เริ่มดิ้น ” มีค่าให้กับ “ จัดรายการ ' คุณสมบัติ. คุณสมบัตินี้ถูกกำหนดให้กับ div หลักซึ่งจะแสดงเป็น flex สมมติว่า div ที่มีคลาสเป็น “ แนวตั้ง ” ถูกสร้างขึ้นในไฟล์ HTML จากนั้นในไฟล์ CSS ให้เลือกคลาสนั้นและกำหนดคุณสมบัติต่อไปนี้:
.แนวตั้ง {
สี : สีขาว ;
ความสูง : 150px ;
แสดง : ดิ้น ;
ช่องว่างภายในซ้าย : 20px ;
จัดรายการ : เริ่มดิ้น ;
สีพื้นหลัง : ป่าไม้เขียวขจี ;
}
- ขั้นแรก กำหนดสไตล์และการจัดตำแหน่งพื้นฐานให้กับ div โดยใช้คุณสมบัติสี สีพื้นหลัง และความสูงของ CSS
- คุณสมบัติ 'จอแสดงผล' ยังตั้งค่าเป็น 'ดิ้น' เพื่อทำให้เป็นเฟล็กซ์บ็อกซ์
- สุดท้าย หากต้องการแสดงข้อความที่เริ่มต้นของเฟล็กซ์บ็อกซ์ ให้ตั้งค่าคุณสมบัติ 'จัดเรียงรายการ' เป็น 'เริ่มต้นแบบยืดหยุ่น'
หลังจากรันโค้ดด้านบนแล้ว หน้าเว็บจะมีลักษณะดังนี้:
เอาต์พุตแสดงว่าตอนนี้ข้อความอยู่ในแนวเดียวกันที่ตำแหน่งบนสุดภายในเฟล็กซ์บ็อกซ์
ตัวอย่างที่ 2: ตำแหน่งตรงกลาง
ในการจัดข้อความในแนวตั้งที่ตำแหน่งกึ่งกลาง ให้ตั้งค่า “ ศูนย์ ” มูลค่าให้กับ CSS “ จัดรายการ ' คุณสมบัติ:
.แนวตั้ง {สี : สีขาว ;
ความสูง : 150px ;
แสดง : ดิ้น ;
ช่องว่างภายในซ้าย : 20px ;
จัดรายการ : ศูนย์ ;
สีพื้นหลัง : ป่าไม้เขียวขจี ;
}
หลังจากดำเนินการตามรหัสด้านบน:
เอาต์พุตด้านบนแสดงว่าข้อความอยู่ในแนวกึ่งกลางของเฟล็กซ์บ็อกซ์
ตัวอย่างที่ 3: ตำแหน่งด้านล่าง
ในการตั้งค่าข้อความที่ด้านล่างของเฟล็กซ์บ็อกซ์ ให้กำหนด “ ปลายงอ ” มูลค่าถึง “ จัดรายการ ' คุณสมบัติ. เวลานี้ข้อความได้รับการจัดตำแหน่งที่ตำแหน่งสิ้นสุดของเฟล็กซ์บ็อกซ์หมายถึงที่ด้านล่าง:
.แนวตั้ง {สี : สีขาว ;
ความสูง : 150px ;
แสดง : ดิ้น ;
ช่องว่างภายในซ้าย : 20px ;
จัดรายการ : ปลายงอ ;
สีพื้นหลัง : ป่าไม้เขียวขจี ;
}
หลังจากรันโค้ดด้านบนแล้ว หน้าเว็บจะมีลักษณะดังนี้:
เอาต์พุตด้านบนแสดงว่าตอนนี้ข้อความอยู่ในแนวตั้งในตำแหน่งด้านล่าง
วิธีที่ 2: การใช้คุณสมบัติ 'ปรับเนื้อหาให้เหมาะสม'
“ ปรับเนื้อหา นอกจากนี้ยังสามารถใช้คุณสมบัติ ” เพื่อจัดข้อความในแนวตั้งภายในเฟล็กซ์บ็อกซ์ อย่างไรก็ตาม มันใช้งานได้เหมือนกับ “ จัดข้อความ ” คุณสมบัติและจัดองค์ประกอบในทิศทางของแถว ดังนั้น เพื่อเปลี่ยนทิศทางของการจัดตำแหน่ง ปุ่ม ' ทิศทางโค้งงอ คุณสมบัติ ” ใช้เพื่อตั้งค่า “ ปรับเนื้อหา ” แนวต่อ “ คอลัมน์ ' ทิศทาง:
.แนวตั้ง {ความสูง : 150px ;
แสดง : ดิ้น ;
ช่องว่างภายในซ้าย : 20px ;
สี : สีขาว ;
สีพื้นหลัง : ดาร์กไซยาน ;
ทิศทางโค้งงอ : คอลัมน์ ;
ปรับเนื้อหา : ปลายงอ ;
}
คำอธิบายของโค้ดด้านบนมีดังต่อไปนี้:
- “ ความสูง ”, “ สี ' และ ' ช่องว่างภายในซ้าย ” คุณสมบัติทำงานเหมือนกับวิธีการข้างต้น
- หลังจากนั้นตั้งค่า “ คอลัมน์ ” มูลค่าถึง “ ทิศทางโค้งงอ ” ของ flexbox เพื่อใช้สไตล์ผ่านคอลัมน์
- หลังจากนั้น “ ปรับเนื้อหา คุณสมบัติ ” จัดข้อความในแนวตั้ง
- ในที่สุด “ ปลายงอ ค่า ” จัดตำแหน่งองค์ประกอบบน “ ด้านล่าง ' ด้านข้าง.
บันทึก : ผู้ใช้สามารถตั้งค่า “ เริ่มดิ้น ' และ ' ศูนย์ ” ค่าของ “ สูงสุด ', และ ' กลาง ” ด้านตามลำดับ
ตัวอย่างเช่น หลังจากรันโค้ดด้านบนแล้ว หน้าเว็บจะมีลักษณะดังนี้:
เอาต์พุตด้านบนแสดงว่าข้อความอยู่ในแนวเดียวกันที่ด้านล่างของเฟล็กซ์บ็อกซ์
บทสรุป
ในการจัดแนวข้อความภายในเฟล็กซ์บ็อกซ์ในแนวตั้ง ให้กดปุ่ม “ จัดรายการ ' และ ' ปรับเนื้อหา ” สามารถใช้คุณสมบัติของ CSS ได้ คุณสมบัติทั้งสองนี้ได้รับ “ เริ่มดิ้น ”, “ ศูนย์ ' หรือ ' ปลายงอ ” ค่าเพื่อจัดตำแหน่งข้อความที่ “ สูงสุด ”, “ กลาง ' และ ' ด้านล่าง ” ทิศทางภายใน flexbox ตามลำดับ บทความนี้ได้สาธิตการจัดข้อความแนวตั้งในเฟล็กซ์บ็อกซ์