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

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

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

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

ไวยากรณ์

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

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

ตัวอย่าง

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

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

css.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:

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

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

Результат:

ดูเพิ่มเติม