ป้องกันไม่ให้รายการดิ้นยืด

ตัวอย่าง:

div {
  display: flex;
  height: 200px;
  background: tan;
}
span {
  background: red;
}

<div>
  <span>This is some text.</span>
</div>

ฉันมีสองคำถามโปรด:

1. ทำไมโดยพื้นฐานถึงเกิดขึ้นกับspan?
2. อะไรคือแนวทางที่ถูกต้องในการป้องกันไม่ให้ยืดโดยไม่ส่งผลกระทบต่อสิ่งของอื่น ๆ ในภาชนะดิ้น?

คุณไม่ต้องการยืดช่วงความสูง?
คุณมีความเป็นไปได้ที่จะส่งผลต่อรายการที่ยืดหยุ่นได้อย่างน้อยหนึ่งรายการเพื่อไม่ให้ยืดความสูงเต็มที่ของภาชนะ

หากต้องการส่งผลกระทบต่อรายการแบบยืดหยุ่นทั้งหมดของคอนเทนเนอร์ให้เลือกสิ่งนี้:
คุณต้องตั้งค่าalign-items: flex-start;เป็นdivและรายการแบบยืดหยุ่นทั้งหมดของคอนเทนเนอร์นี้ได้รับความสูงของเนื้อหา

div {
  align-items: flex-start;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}

<div>
  <span>This is some text.</span>
</div>

หากต้องการให้มีผลกับ flex-item รายการเดียวให้เลือกตัวเลือกนี้:
หากคุณต้องการคลายการยืดรายการ Flex รายการเดียวบนคอนเทนเนอร์คุณต้องตั้งค่าalign-self: flex-start;เป็น flex-item นี้ รายการที่ยืดหยุ่นอื่น ๆ ทั้งหมดของคอนเทนเนอร์จะไม่ได้รับผลกระทบ

div {
  display: flex;
  height: 200px;
  background: tan;
}
span.only {
  background: red;
  align-self:flex-start;
}
span {
    background:green;
}

<div>
  <span class="only">This is some text.</span>
  <span>This is more text.</span>
</div>

เหตุใดจึงเกิดขึ้นกับspan?
ค่าเริ่มต้นของสถานที่ให้บริการคือalign-items stretchนี่คือเหตุผลว่าทำไมต้องspanเติมความสูงของdiv.

ความแตกต่างระหว่างbaselineและflex-start?
หากคุณมีข้อความบางส่วนในรายการแบบยืดหยุ่นโดยมีขนาดแบบอักษรที่แตกต่างกันคุณสามารถใช้เส้นฐานของบรรทัดแรกเพื่อวางรายการแบบยืดหยุ่นในแนวตั้ง รายการแบบยืดหยุ่นที่มีขนาดตัวอักษรเล็กกว่าจะมีช่องว่างระหว่างคอนเทนเนอร์กับตัวมันเองที่ด้านบน ด้วยflex-startFlex-item จะถูกตั้งค่าไว้ที่ด้านบนสุดของคอนเทนเนอร์ (โดยไม่มีช่องว่าง)

div {
  align-items: baseline;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}
span.fontsize {
  font-size:2em;
}

<div>
  <span class="fontsize">This is some text.</span>
  <span>This is more text.</span>
</div>

คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับความแตกต่างระหว่างbaselineและflex-startที่นี่:
อะไรคือความแตกต่างระหว่าง flex-start และ baseline