คุณสมบัติ flex-basis

คุณสมบัติ flex-basis กำหนดขนาด ของ flex block เฉพาะก่อนที่จะใช้ คุณสมบัติ flex อื่นๆ กับมัน โดยทั่วไป คุณสมบัตินี้ กำหนดขนาดขององค์ประกอบตามแกนหลัก ซึ่งหมายความว่าหากแกนหลักอยู่ในแนวนอน - คุณสมบัตินี้จะกำหนดความกว้างขององค์ประกอบ และหากอยู่ในแนวตั้ง - ก็จะกำหนดความสูง

ใช้กับ flex block เฉพาะ

คุณสมบัตินี้เป็นส่วนหนึ่งของคุณสมบัติแบบย่อ flex

ไวยากรณ์

ตัวเลือก {
	flex-basis: หน่วย CSS ใดๆ (และเปอร์เซ็นต์) | auto;
}

ค่าเริ่มต้น: auto

ตัวอย่าง

สมมติว่าแกนหลักของเราอยู่ในแนวนอน และ flex-basis มีค่าเป็น 50px ในกรณีนี้ความกว้างขององค์ประกอบจะเป็น 50px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent	{
	display: flex;
	flex-direction: row; /* แกนอยู่ในแนวนอน */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* ขนาดขององค์ประกอบ */
	border: 1px solid green;
}

ตัวอย่าง

ทีนี้ลองพลิกแกน โดยไม่เปลี่ยนค่าของ คุณสมบัติ flex-basis ในกรณีนี้ ความสูงขององค์ประกอบจะเป็น 50px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: column; /* แกนอยู่ในแนวตั้ง */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

ดูเพิ่มเติม

คุณสมบัติ flex-direction,
ซึ่งกำหนดทิศทางของแกนของ flex block
คุณสมบัติ justify-content,
ซึ่งกำหนดการจัดแนวตามแกนหลัก
คุณสมบัติ align-items,
ซึ่งกำหนดการจัดแนวตามแกนขวาง
คุณสมบัติ flex-wrap,
ซึ่งกำหนดการขึ้นบรรทัดใหม่ของ flex block
คุณสมบัติ flex-flow,
รูปแบบย่อสำหรับ flex-direction และ flex-wrap
คุณสมบัติ order,
ซึ่งกำหนดลำดับของ flex block
คุณสมบัติ align-self,
ซึ่งกำหนดการจัดแนวของ block เฉพาะ
คุณสมบัติ flex-grow,
ซึ่งกำหนดการขยายตัวของ flex block
คุณสมบัติ flex-shrink,
ซึ่งกำหนดการหดตัวของ flex block
คุณสมบัติ flex,
รูปแบบย่อสำหรับ flex-grow, flex-shrink และ flex-basis