Trong CSS Flexbox, tại sao không có các thuộc tính của justify-item

Hãy xem xét trục chính và trục chéo của thùng chứa flex:

                                                                                                                                                   _{Nguồn: W3C}

Để căn chỉnh các mục flex dọc theo trục chính, có một thuộc tính:

• justify-content

Để căn chỉnh các mục flex dọc theo trục chéo, có ba thuộc tính:

• align-content
• align-items
• align-self

Trong hình trên, trục chính là ngang và trục chéo là dọc. Đây là các hướng mặc định của một container flex.

Tuy nhiên, những hướng này có thể dễ dàng thay thế với flex-directiontài sản.

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(Trục chéo luôn vuông góc với trục chính.)

Quan điểm của tôi khi mô tả cách thức hoạt động của các trục là dường như không có gì đặc biệt về cả hai hướng. Trục chính, trục chéo, cả hai đều bằng nhau về tầm quan trọng và flex-directiongiúp dễ dàng chuyển đổi qua lại.

Vậy tại sao trục chéo có được hai thuộc tính căn chỉnh bổ sung?

Tại sao align-contentvàalign-items hợp nhất thành một thuộc tính cho trục chính?

Tại sao trục chính không có được một justify-selftài sản?

Các tình huống trong đó các thuộc tính này sẽ hữu ích:

• đặt một vật phẩm flex ở góc của hộp chứa flex
  #box3 { align-self: flex-end; justify-self: flex-end; }

• tạo một nhóm các mục flex thẳng hàng bên phải ( justify-content: flex-end) nhưng có mục đầu tiên căn lề trái (justify-self: flex-start )

  Xem xét một phần tiêu đề với một nhóm các mục điều hướng và logo. Với justify-selflogo có thể được căn trái sang trái trong khi các mục điều hướng ở bên phải và toàn bộ điều chỉnh trơn tru ("uốn cong") với các kích thước màn hình khác nhau.

• trong một hàng gồm ba mục flex, gắn vật phẩm ở giữa vào giữa của container ( justify-content: center) và căn chỉnh các mục liền kề với các cạnh của container ( justify-self: flex-startvàjustify-self: flex-end ).

  Lưu ý rằng các giá trị space-aroundvà space-betweenthuộc justify-contenttính sẽ không giữ mục giữa ở giữa về vùng chứa nếu các mục liền kề có chiều rộng khác nhau.

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>note that the middlebox will only be truly centered if adjacent boxes are equal width</p>

phiên bản jsFiddle

Khi viết bài này, không có đề cập đến justify-selfhoặc justify-itemstrong thông số flexbox .

Tuy nhiên, trong Mô-đun căn chỉnh hộp CSS , là đề xuất chưa hoàn thành của W3C để thiết lập một tập hợp các thuộc tính căn chỉnh chung để sử dụng trên tất cả các mô hình hộp, có:

                                                                                                                                                   _{Nguồn: W3C}

Bạn sẽ nhận thấy điều đó justify-selfvà justify-itemsđang được xem xét ... nhưng không phải cho flexbox .

Tôi sẽ kết thúc bằng cách nhắc lại câu hỏi chính:

Tại sao không có thuộc tính "justify-items" và "justify-self"?

Phương pháp căn chỉnh các mục linh hoạt dọc theo trục chính

Như đã nêu trong câu hỏi:

Để căn chỉnh các mục flex dọc theo trục chính, có một thuộc tính: justify-content

Để mục flex class dọc theo trục chéo có ba thuộc tính: align-content, align-itemsvàalign-self .

Câu hỏi sau đó hỏi:

Tại sao không có justify-itemsvà justify-selftài sản?

Một câu trả lời có thể là: Bởi vì chúng không cần thiết.

Đặc tả flexbox cung cấp hai phương pháp để căn chỉnh các mục flex dọc theo trục chính:

1. Các justify-content bất động sản từ khóa, và
2. auto lề

nội dung biện minh

Các justify-content Canh lề sở hữu flex mục dọc theo trục chính của container flex.

Nó được áp dụng cho container flex nhưng chỉ ảnh hưởng đến các mục flex.

Có năm tùy chọn căn chỉnh:

• flex-start ~ Các mặt hàng Flex được đóng gói vào đầu dòng.

  

• flex-end ~ Các mặt hàng Flex được đóng gói vào cuối dòng.

  

• center ~ Các mặt hàng Flex được đóng gói về phía trung tâm của dòng.

  

• space-between~ Các mục Flex được đặt cách đều nhau, với mục đầu tiên được căn chỉnh theo một cạnh của container và mục cuối cùng được căn chỉnh theo cạnh đối diện. Các cạnh được sử dụng bởi các mục đầu tiên và cuối cùng phụ thuộc vào flex-directionvà chế độ viết ( ltrhoặc rtl).

  

• space-around~ Tương tự như space-betweenngoại trừ với không gian nửa kích thước ở cả hai đầu.

  

Lợi nhuận tự động

Với autolề , các mục flex có thể được căn giữa, cách nhau hoặc đóng gói thành các nhóm phụ.

Không giống như justify-content, được áp dụng cho thùng chứa flex, autolề đi vào các mục flex.

Họ làm việc bằng cách tiêu thụ tất cả không gian trống theo hướng được chỉ định.

Căn chỉnh nhóm các mục flex ở bên phải, nhưng mục đầu tiên bên trái

Kịch bản từ câu hỏi:

• tạo một nhóm các mục flex thẳng hàng bên phải ( justify-content: flex-end) nhưng có mục đầu tiên căn lề trái (justify-self: flex-start )

  Xem xét một phần tiêu đề với một nhóm các mục điều hướng và logo. Với justify-selflogo có thể được căn trái sang trái trong khi các mục điều hướng ở bên phải và toàn bộ điều chỉnh trơn tru ("uốn cong") với các kích thước màn hình khác nhau.

Các kịch bản hữu ích khác:

Đặt một mục flex trong góc

Kịch bản từ câu hỏi:

• đặt một vật phẩm flex ở một góc .box { align-self: flex-end; justify-self: flex-end; }

Trung tâm một mục flex theo chiều dọc và chiều ngang

margin: autolà một thay thế cho justify-content: centervà align-items: center.

Thay vì mã này trên container flex:

.container {
    justify-content: center;
    align-items: center;
}

Bạn có thể sử dụng điều này trên mục flex:

.box56 {
    margin: auto;
}

Sự thay thế này rất hữu ích khi căn giữa một vật phẩm flex tràn vào thùng chứa .

Căn giữa một mục flex và căn giữa một mục flex thứ hai giữa cạnh thứ nhất và cạnh

Một container flex sắp xếp các mục flex bằng cách phân phối không gian trống.

Do đó, để tạo sự cân bằng như nhau , sao cho một vật phẩm ở giữa có thể được căn giữa trong vật chứa với một vật phẩm duy nhất bên cạnh, một đối trọng phải được đưa ra.

Trong các ví dụ dưới đây, các mục flex thứ ba vô hình (hộp 61 & 68) được giới thiệu để cân bằng các mục "thực" (hộp 63 & 66).

Tất nhiên, phương pháp này không có gì tuyệt vời về mặt ngữ nghĩa.

Ngoài ra, bạn có thể sử dụng phần tử giả thay vì phần tử DOM thực tế. Hoặc bạn có thể sử dụng định vị tuyệt đối. Tất cả ba phương pháp được đề cập ở đây: Các mục flex căn giữa và dưới cùng

LƯU Ý: Các ví dụ trên sẽ chỉ hoạt động - về mặt định tâm thực sự - khi các mục ngoài cùng có chiều cao / chiều rộng bằng nhau. Khi các mục flex có độ dài khác nhau, xem ví dụ tiếp theo.

Trung tâm một mục flex khi các mục liền kề khác nhau về kích thước

Kịch bản từ câu hỏi:

• trong một hàng gồm ba mục flex, gắn vật phẩm ở giữa vào giữa của container ( justify-content: center) và căn chỉnh các mục liền kề với các cạnh của container ( justify-self: flex-startvà justify-self: flex-end).

  Lưu ý rằng các giá trị space-aroundvà space-betweenthuộc justify-contenttính sẽ không giữ mục giữa ở giữa so với vùng chứa nếu các mục liền kề có chiều rộng khác nhau ( xem bản demo ).

Như đã lưu ý, trừ khi tất cả các mục flex có chiều rộng hoặc chiều cao bằng nhau (tùy thuộc vào flex-direction), mục giữa không thể thực sự được căn giữa. Vấn đề này làm cho một trường hợp mạnh mẽ cho một justify-selftài sản (tất nhiên được thiết kế để xử lý các nhiệm vụ).

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

Đây là hai phương pháp để giải quyết vấn đề này:

Giải pháp số 1: Định vị tuyệt đối

Thông số kỹ thuật flexbox cho phép định vị tuyệt đối các mục flex . Điều này cho phép vật phẩm ở giữa được căn giữa một cách hoàn hảo bất kể kích thước của anh chị em của nó.

Chỉ cần lưu ý rằng, giống như tất cả các yếu tố được định vị tuyệt đối, các mục được xóa khỏi luồng tài liệu . Điều này có nghĩa là họ không chiếm không gian trong container và có thể chồng lên anh chị em của họ.

Trong các ví dụ dưới đây, mục giữa được căn giữa với định vị tuyệt đối và các mục bên ngoài vẫn trong dòng. Nhưng cách bố trí tương tự có thể đạt được theo kiểu ngược lại: Căn giữa mục giữa justify-content: centervà hoàn toàn định vị các mục bên ngoài.

Giải pháp số 2: Container Flex lồng nhau (không định vị tuyệt đối)

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}

<div class="container">
  <div class="box box71"><span>71 short</span></div>
  <div class="box box72"><span>72 centered</span></div>
  <div class="box box73"><span>73 loooooooooooooooong</span></div>
</div>

Đây là cách nó hoạt động:

• Div cấp cao nhất (.container ) là một thùng chứa flex.
• Mỗi div div ( .box) bây giờ là một mục flex.
• Mỗi .boxmục được đưa flex: 1ra để phân phối không gian container bằng nhau.
• Bây giờ các mục đang tiêu thụ tất cả không gian trong hàng và có chiều rộng bằng nhau.
• Làm cho mỗi mục một thùng chứa flex (lồng nhau) và thêm justify-content: center.
• Bây giờ mỗi spanphần tử là một mục flex trung tâm.
• Sử dụng autolề flex để dịch chuyển spans bên trái và bên phải.

Bạn cũng có thể từ bỏ justify-contentvà sử dụng autolợi nhuận độc quyền.

Nhưng justify-contentcó thể làm việc ở đây vì autolợi nhuận luôn được ưu tiên. Từ thông số kỹ thuật:

8.1. Căn chỉnh với auto lề

Trước khi căn chỉnh thông qua justify-contentvà align-self, bất kỳ không gian trống tích cực nào cũng được phân phối cho lề tự động theo chiều đó.

justify-content: space-same (khái niệm)

Quay trở lại justify-contenttrong một phút, đây là một ý tưởng cho một lựa chọn khác.

• space-same~ Một sự kết hợp của space-betweenvà space-around. Các mục Flex được đặt cách đều nhau (như space-between), ngoại trừ thay vì các khoảng trống một nửa ở cả hai đầu (như space-around), có các khoảng trống kích thước đầy đủ ở cả hai đầu.

Bố cục này có thể đạt được với ::beforevà ::aftercác phần tử giả trên thùng chứa flex.

^{(tín dụng: @oriol cho mã và @crl cho nhãn)}

CẬP NHẬT: Các trình duyệt đã bắt đầu thực hiện space-evenly, thực hiện các điều trên. Xem bài đăng này để biết chi tiết: Không gian bằng nhau giữa các mục flex

PLAYGROUND (bao gồm mã cho tất cả các ví dụ ở trên)

Tôi biết đây không phải là một câu trả lời, nhưng tôi muốn đóng góp cho vấn đề này vì những gì nó đáng giá. Sẽ thật tuyệt nếu họ có thể phát hành justify-selfcho flexbox để làm cho nó thực sự linh hoạt.

Tôi tin rằng khi có nhiều mục trên trục, cách justify-selfhành xử hợp lý nhất là căn chỉnh chính nó với các hàng xóm gần nhất (hoặc cạnh) như được trình bày dưới đây.

Tôi thực sự hy vọng, W3C chú ý đến điều này và ít nhất sẽ xem xét nó. =)

Bằng cách này, bạn có thể có một mục thực sự tập trung bất kể kích thước của hộp bên trái và bên phải. Khi một trong các hộp đạt đến điểm của hộp trung tâm, nó sẽ chỉ cần đẩy nó cho đến khi không còn chỗ để phân phối.

Sự dễ dàng để tạo ra bố cục tuyệt vời là vô tận, hãy xem ví dụ "phức tạp" này.

Điều này đã được hỏi trên danh sách kiểu www và Tab Atkins (biên tập viên spec) đã đưa ra câu trả lời giải thích lý do . Tôi sẽ giải thích một chút về điều đó ở đây.

Để bắt đầu, ban đầu hãy giả sử container flex của chúng tôi là một dòng (flex-wrap: nowrap ). Trong trường hợp này, rõ ràng có sự khác biệt căn chỉnh giữa trục chính và trục chéo - có nhiều mục được xếp chồng lên nhau trong trục chính, nhưng chỉ có một mục được xếp chồng lên nhau theo trục chéo. Vì vậy, thật hợp lý khi có một "căn chỉnh" cho mỗi mục có thể tùy chỉnh trong trục chéo (vì mỗi mục được căn chỉnh riêng, theo cách riêng của nó), trong khi nó không có ý nghĩa trong trục chính (kể từ đó, các mục được liên kết tập thể).

Đối với flexbox nhiều dòng, logic tương tự áp dụng cho từng "dòng flex". Trong một dòng nhất định, các mục được căn chỉnh riêng lẻ trong trục chéo (vì chỉ có một mục trên mỗi dòng, trong trục chéo), so với chung trong trục chính.

Đây là một cách khác để diễn đạt nó: vì vậy, tất cả các thuộc tính *-selfvà *-contentvề cách phân phối thêm không gian xung quanh mọi thứ. Nhưng điểm khác biệt chính là các *-selfphiên bản dành cho các trường hợp chỉ có một thứ duy nhất trong trục đó và các *-contentphiên bản dành cho khi có khả năng có nhiều thứ trong trục đó . Kịch bản một điều so với nhiều điều là các loại vấn đề khác nhau và do đó chúng có sẵn các loại tùy chọn khác nhau - ví dụ: giá trị space-around/ space-betweencó ý nghĩa *-content, nhưng không phải *-self.

SO: Trong trục chính của flexbox, có nhiều thứ để phân phối không gian xung quanh. Vì vậy, một *-contenttài sản có ý nghĩa ở đó, nhưng không phải là một *-selftài sản.

Ngược lại, trong trục chéo, chúng ta có cả a *-selfvà thuộc *-contenttính. Người ta xác định cách chúng ta phân phối không gian xung quanh nhiều đường uốn ( align-content), trong khi đường kia ( align-self) xác định cách phân phối không gian xung quanh các mục flex riêng lẻ trong trục chéo, trong một đường uốn cụ thể.

(Tôi đang bỏ qua *-itemscác thuộc tính ở đây, vì chúng chỉ đơn giản là thiết lập mặc định cho *-self.)

Tôi biết điều này không sử dụng flexbox, nhưng đối với trường hợp sử dụng đơn giản gồm ba mục (một ở bên trái, một ở giữa, một ở bên phải), điều này có thể được thực hiện dễ dàng bằng cách sử dụng display: gridcho cha mẹ, grid-area: 1/1/1/1;cho trẻ em và justify-selfđể định vị của những đứa trẻ đó

<div style="border: 1px solid red; display: grid; width: 100px; height: 25px;">
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: left;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: center;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: right;"></div>
</div>

Tôi chỉ tìm thấy giải pháp của riêng tôi cho vấn đề này, hoặc ít nhất là vấn đề của tôi.
Tôi đã sử dụng justify-content: space-aroundthay vìjustify-content: space-between; .

Bằng cách này, các yếu tố cuối sẽ bám sát trên cùng và dưới cùng, và bạn có thể có lề tùy chỉnh nếu muốn.