การจัดเรียงบล็อกแบบ Flex ตามแกนขวางใน CSS

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

มาลองดูจากตัวอย่างกัน

ตัวอย่าง

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

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

มาดูผลลัพธ์ที่เราได้:

.parent {
	display: flex;
	flex-direction:  row;        /* แกนหลักไปทางขวา, แกนขวางลงล่าง */
	justify-content: flex-start; /* บล็อกไปที่จุดเริ่มต้นของแกนหลัก */
	align-items:     flex-start; /* บล็อกไปที่จุดเริ่มต้นของแกนขวาง */
}

ผลลัพธ์จากการรันโค้ด:

ตัวอย่าง

คราวนี้ให้ดันบล็อกไปที่จุดสิ้นสุดของแกนขวาง นั่นคือขอบล่าง สำหรับการนี้ ให้ตั้งค่า align-items เป็น flex-end:

.parent {
	display: flex;
	flex-direction:  row;        /* แกนหลักไปทางขวา, แกนขวางลงล่าง */
	justify-content: flex-start; /* บล็อกไปที่จุดเริ่มต้นของแกนหลัก */
	align-items:     flex-end;   /* บล็อกไปที่จุดสิ้นสุดของแกนขวาง */
}

ผลลัพธ์จากการรันโค้ด:

ตัวอย่าง

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

.parent {
	display: flex;
	flex-direction:  column;     /* แกนหลักลงล่าง, แกนขวางไปทางขวา */
	justify-content: flex-start; /* บล็อกไปที่จุดเริ่มต้นของแกนหลัก */
	align-items:     flex-start; /* บล็อกไปที่จุดเริ่มต้นของแกนขวาง */
}

ผลลัพธ์จากการรันโค้ด:

ตัวอย่าง

คราวนี้ตามแกนขวาง ให้ดันบล็อกไปที่จุดสิ้นสุดของมัน:

.parent {
	display: flex;
	flex-direction:  column;     /* แกนหลักลงล่าง, แกนขวางไปทางขวา */
	justify-content: flex-start; /* บล็อกไปที่จุดเริ่มต้นของแกนหลัก */
	align-items:     flex-end;   /* บล็อกไปที่จุดสิ้นสุดของแกนขวาง */
}

ผลลัพธ์จากการรันโค้ด:

ตัวอย่าง

ดันบล็อกไปที่จุดสิ้นสุดของทั้งสองแกน:

.parent {
	display: flex;
	flex-direction:  column;   /* แกนหลักลงล่าง, แกนขวางไปทางขวา */
	justify-content: flex-end; /* บล็อกไปที่จุดสิ้นสุดของแกนหลัก */
	align-items:     flex-end; /* บล็อกไปที่จุดสิ้นสุดของแกนขวาง */
}

ผลลัพธ์จากการรันโค้ด:

ตัวอย่าง

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

ดันบล็อกไปที่จุดเริ่มต้นของทั้งสองแกน:

.parent {
	display: flex;
	flex-direction:  column-reverse; /* แกนหลักขึ้นบน, แกนขวางไปทางขวา */
	justify-content: flex-start;     /* บล็อกไปที่จุดเริ่มต้นของแกนหลัก */
	align-items:     flex-start;     /* บล็อกไปที่จุดเริ่มต้นของแกนขวาง */
}

ผลลัพธ์จากการรันโค้ด:

แบบฝึกหัด

ทำหน้าเว็บตามตัวอย่างนี้: