Câu hỏi này liên quan đến một trình duyệt có hỗ trợ css3 đầy đủ bao gồm cả flexbox.

Tôi có một hộp đựng linh hoạt với một số mặt hàng trong đó. Tất cả chúng đều hợp lý để flex-start nhưng tôi muốn mục cuối cùng .end hợp lý để flex-end. Có cách nào tốt để thực hiện điều này mà không cần sửa đổi HTML và không cần đến định vị tuyệt đối không?

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

Mô-đun bố trí hộp linh hoạt - 8.1. Căn chỉnh với lề tự động

Lề tự động trên các mục linh hoạt có tác dụng rất giống với lề tự động trong luồng khối:

• Trong quá trình tính toán cơ sở uốn và độ dài linh hoạt, lề tự động được coi là 0.

• Trước khi căn chỉnh qua justify-contentvà align-self, bất kỳ không gian trống tích cực nào sẽ được phân phối cho các lề tự động trong thứ nguyên đó.

Do đó, bạn có thể sử dụng margin-top: autođể phân phối không gian giữa các phần tử khác và phần tử cuối cùng.

Điều này sẽ đặt phần tử cuối cùng ở dưới cùng.

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>

Tương tự như vậy, bạn cũng có thể sử dụng margin-left: autohoặc margin-right: autocho cùng một căn chỉnh theo chiều ngang.

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>

Nguyên tắc flexbox này cũng hoạt động theo chiều ngang

Trong quá trình tính toán cơ sở uốn và độ dài linh hoạt, lề tự động được coi là 0.
Trước khi căn chỉnh thông qua justify-content và align-self, mọi không gian trống tích cực sẽ được phân phối cho lề tự động trong thứ nguyên đó.

Đặt lề trái tự động cho Mục cuối cùng sẽ thực hiện công việc.

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

Ví dụ về mã:

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

Đoạn mã Codepen

Điều này có thể rất hữu ích cho Chân trang trên màn hình.

Như Envato đã làm ở đây với logo của công ty.

Đoạn mã Codepen