ความละโมบขององค์ประกอบ Flex ใน CSS

สมมติว่าตอนนี้เรามีบล็อก flex สองบล็อก ที่จัดเรียงในแถว บล็อกเหล่านี้มีค่าความกว้าง ที่ 100px และสำหรับผู้ปกครอง - 300px:

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

css.parent {
  display: flex;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

ดังที่คุณเห็น ความกว้างรวมขององค์ประกอบของเรา น้อยกว่าความกว้างของคอนเทนเนอร์ผู้ปกครอง ดังนั้นจึงมีพื้นที่ว่างเหลืออยู่ทางด้านขวา

หากต้องการ พื้นที่ว่างนี้สามารถ แบ่งตามสัดส่วนระหว่างองค์ประกอบของเราได้ ทำได้โดยใช้คุณสมบัติ flex-grow ที่กำหนดให้กับองค์ประกอบ flex ค่าของ คุณสมบัตินี้คือตัวเลขที่ไม่มีหน่วย

ลองมาดูในทางปฏิบัติว่าคุณสมบัตินี้ทำงานอย่างไร

ตัวอย่าง

ตอนนี้เรามีบล็อก flex สองบล็อกที่มีความกว้าง 100px ความกว้างรวมขององค์ประกอบ 200px และความกว้างของคอนเทนเนอร์ผู้ปกครอง - 300px ปรากฏว่ามีพื้นที่ว่างเหลือ 100px

หากองค์ประกอบไม่มี flex-grow เราก็จะเห็นพื้นที่ว่างนี้ แต่หากกำหนดให้ พื้นที่ว่างขององค์ประกอบ จะมากกว่าที่กำหนด - พวกมันจะแบ่งพื้นที่ว่าง ระหว่างกันตามสัดส่วน และเพิ่มเข้าไปในความกว้างของตัวเอง

สมมติตัวอย่างเช่น องค์ประกอบแรกมี flex-grow เท่ากับ 1 และองค์ประกอบที่สอง - 3 มาลอง คำนวณดูว่าแต่ละองค์ประกอบจะได้พื้นที่ว่างส่วนเท่าไร

เริ่มต้นต้องหาจำนวนรวม ของหน่วย flex-grow ขององค์ประกอบทั้งหมดของเรา องค์ประกอบแรกมีค่า 1 และ องค์ประกอบที่สอง - 3 นั่นหมายความว่าโดยรวม มีค่า 4

ทีนี้ลองหารพื้นที่ว่าง 100px ด้วย 4 และจะได้ว่า 25px เป็น หนึ่งหน่วยของ flex-grow ปรากฏว่า องค์ประกอบแรกจะเพิ่มหนึ่งหน่วย ของ flex-grow นั่นคือ 25px และ องค์ประกอบที่สอง - สามหน่วย นั่น คือ 75px

ความกว้างขององค์ประกอบแรกจะได้ 125px และองค์ประกอบที่สอง - 175px:

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

css.parent {
  display: flex;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 3;
}

Результат:

ตัวอย่าง

สมมติว่าความกว้างของคอนเทนเนอร์ผู้ปกครองเท่ากับ 400px ความกว้างขององค์ประกอบแรก 200px และความกว้าง ขององค์ประกอบที่สอง - 100px ปรากฏว่า พื้นที่ว่างยังคง เท่ากับ 100px

ลองกำหนด flex-grow ให้กับแต่ละองค์ประกอบ เท่ากับ 1 โดยรวมจะได้ 2 นั่นคือ 100px ของพื้นที่ว่าง ต้องหารด้วย 2 ปรากฏว่า 50px เป็นของ หนึ่งหน่วยความละโมบ

เนื่องจากองค์ประกอบทั้งหมดมีค่า flex-grow เท่ากัน ทุกองค์ประกอบจะเพิ่ม ค่าเท่ากันคือ 50px นั่นหมายความว่า องค์ประกอบแรกจะกลายเป็น 250px และ องค์ประกอบที่สองจะกลายเป็น 150px:

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

css.parent {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}

Результат:

ตัวอย่าง

สมมติว่าความกว้างของคอนเทนเนอร์ผู้ปกครองเท่ากับ 400px อีกครั้ง ความกว้างขององค์ประกอบแรก 200px และความกว้าง ขององค์ประกอบที่สอง - 100px

คราวนี้ลองกำหนดให้องค์ประกอบแรก flex-grow เป็นค่า 3 และองค์ประกอบที่สอง - เป็นค่า 1 ปรากฏว่าความละโมบ รวมเท่ากับ 4 ดังนั้นหนึ่งหน่วย ของความละโมบเท่ากับ 100px / 4 = 25px

องค์ประกอบแรกจะเพิ่ม 75px และกลายเป็น 275px และองค์ประกอบที่สอง - 25px มันจะกลายเป็น 125px:

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

css.parent {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 3;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}

Результат:

งานฝึกปฏิบัติ

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

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

css.parent {
  display: flex;
  width: 500px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 3;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}
.elem3 {
  width: 100px;
  flex-grow: 1;
}

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

css.parent {
  display: flex;
  width: 700px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 2;
}
.elem3 {
  width: 200px;
  flex-grow: 3;
}

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

css.parent {
  display: flex;
  width: 500px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}
.elem3 {
  width: 100px;
  flex-grow: 1;
}

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem3">3</div>
  <div class="child elem4">4</div>
</div>

css.parent {
  display: flex;
  width: 1000px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 2;
}
.elem3 {
  width: 100px;
  flex-grow: 4;
}
.elem4 {
  width: 100px;
  flex-grow: 3;
}