คำถามนี้เกี่ยวข้องกับเบราว์เซอร์ที่รองรับ css3 เต็มรูปแบบรวมถึง flexbox

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

.container {
  display: flex;
  flex-direction: column;
  outline: 1px solid green;
  min-height: 400px;
  width: 100px;
  justify-content: flex-start;
}
p {
  height: 50px;
  background-color: blue;
  margin: 5px;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>

โมดูลเค้าโครงกล่องที่ยืดหยุ่น - 8.1 การจัดแนวด้วยระยะขอบอัตโนมัติ

ระยะขอบอัตโนมัติในรายการที่ยืดหยุ่นมีผลคล้ายกับระยะขอบอัตโนมัติในขั้นตอนการบล็อก:

• ในระหว่างการคำนวณฐานดิ้นและความยาวที่ยืดหยุ่นระยะขอบอัตโนมัติจะถือว่าเป็น 0

• ก่อนที่จะจัดแนวผ่านjustify-contentและalign-selfพื้นที่ว่างเชิงบวกจะกระจายไปยังระยะขอบอัตโนมัติในมิติข้อมูลนั้น

ดังนั้นคุณสามารถใช้margin-top: autoเพื่อกระจายช่องว่างระหว่างองค์ประกอบอื่นและองค์ประกอบสุดท้าย

สิ่งนี้จะวางตำแหน่งองค์ประกอบสุดท้ายที่ด้านล่าง

p:last-of-type {
  margin-top: auto;
}

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  min-height: 200px;
  width: 100px;
}
p {
  height: 30px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-top: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
</div>

ในทำนองเดียวกันคุณยังสามารถใช้margin-left: autoหรือmargin-right: autoสำหรับการจัดตำแหน่งเดียวกันในแนวนอน

p:last-of-type {
  margin-left: auto;
}

.container {
  display: flex;
  width: 100%;
  border: 1px solid #000;
}
p {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

หลักการ flexbox นี้ยังทำงานในแนวนอน

ในระหว่างการคำนวณฐานดิ้นและความยาวที่ยืดหยุ่นระยะขอบอัตโนมัติจะถือว่าเป็น 0
ก่อนที่จะจัดแนวผ่าน justify-content และ align-self พื้นที่ว่างเชิงบวกจะถูกกระจายไปยังระยะขอบอัตโนมัติในมิตินั้น

การตั้งค่าระยะขอบซ้ายอัตโนมัติสำหรับรายการสุดท้ายจะทำงาน

.last-item {
  margin-left: auto;
}

ตัวอย่างรหัส:

.container {
  display: flex;
  width: 400px;
  outline: 1px solid black;
}

p {
  height: 50px;
  width: 50px;
  margin: 5px;
  background-color: blue;
}

.last-item {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="last-item"></p>
</div>

Codepen Snippet

สิ่งนี้มีประโยชน์มากสำหรับส่วนท้ายของเดสก์ท็อป

อย่างที่Envatoทำที่นี่กับโลโก้ของ บริษัท

Codepen Snippet