Cách xác minh một mục flexbox duy nhất (ghi đè nội dung justify)

Bạn có thể ghi đè lên align-itemsvới align-selfcho một mục flex. Tôi đang tìm cách ghi đè lên justify-contentmột mục flex.

Nếu bạn có một hộp chứa flexbox justify-content:flex-end, nhưng bạn muốn mục đầu tiên là justify-content: flex-start, làm thế nào có thể được thực hiện?

Điều này đã được trả lời tốt nhất bởi bài đăng này: https://stackoverflow.com/a/33856609/269394

Dường như không có justify-self, nhưng bạn có thể đạt được cài đặt kết quả tương tự phù hợp marginvới auto. Ví dụ. đối với flex-direction: row(mặc định), bạn nên đặt margin-right: autođể sắp xếp con sang trái.

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}

<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>

Behavior Hành vi này được xác định bởi thông số Flexbox .

AFAIK không có thuộc tính nào trong thông số kỹ thuật, nhưng đây là một mẹo tôi đã sử dụng: đặt phần tử container (phần tử có display:flex) thành justify-content:space-around Sau đó thêm một phần tử phụ giữa mục thứ nhất và mục thứ hai và đặt thành flex-grow:10(hoặc một số giá trị khác hoạt động với thiết lập của bạn)

Chỉnh sửa: nếu các mục được căn chỉnh chặt chẽ, bạn cũng nên thêm flex-shrink: 10;vào phần tử phụ, do đó bố cục sẽ được phản hồi đúng trên các thiết bị nhỏ hơn.

Nếu bạn không thực sự bị hạn chế trong việc giữ tất cả các phần tử này dưới dạng các nút anh chị em, bạn có thể bọc các phần tử đi cùng nhau trong một hộp flex mặc định khác và có thùng chứa cả hai sử dụng khoảng trắng giữa.

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>

Hoặc nếu bạn đang làm điều tương tự với flex-start và flex-end đảo ngược, bạn chỉ cần trao đổi thứ tự của thùng chứa flex mặc định và con đơn độc.

Có vẻ như justify-selfsẽ đến với trình duyệt sớm . Đã có một bài viết về nó trên MDN . Tại thời điểm viết bài này, hỗ trợ trình duyệt còn kém.

Về giải pháp lề: Tôi có lưới Flexbox với các khoảng trống. Không có flex-gaptài sản (chưa?) Với Flexbox. Vì vậy, đối với máng xối, tôi đang sử dụng paddings và lề, vì vậy margin: autocần ghi đè lên các lề khác ...

Đối với những tình huống mà chiều rộng của các mục mà bạn muốn làm flex-endnổi tiếng, bạn có thể đặt flex của họ để "0 0 ## px" và thiết lập các mục mà bạn muốn flex-startvớiflex:1

Điều này sẽ khiến flex-startvật phẩm giả điền vào thùng chứa, chỉ cần định dạng nó text-align:lefthoặc bất cứ thứ gì.

Tôi đã giải quyết một trường hợp tương tự bằng cách đặt kiểu của mục bên trong thành margin: 0 auto.
Tình huống: Menu của tôi thường chứa ba nút, trong trường hợp chúng cần phải có justify-content: space-between. Nhưng khi chỉ có một nút, giờ đây nó sẽ được căn giữa thay vì sang trái.