Để trả lời câu hỏi của bạn:
1
Như reiallenramos đã đề cập, "Các thuộc tính justify-self và justify-item không được triển khai trong flexbox. Điều này là do tính chất một chiều của flexbox và có thể có nhiều mục dọc theo trục mục. Để căn chỉnh các mục dọc theo trục chính, nội tuyến trong flexbox, bạn sử dụng thuộc tính nội dung justify. " - MD
2-3
Màn hình này được chụp từ W3 thực hiện công việc tuyệt vời để hiển thị những gì họ làm và sự khác biệt giữa chúng .
Điều tốt để biết:
Để biết thêm thông tin và ví dụ, tôi sẽ đề nghị bạn kiểm tra:
- //developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alocation_in_CSS_Grid_Layout
- //www.smashingmagazine.com/2017/06/building-production- yet-css-grid-layout/
- //www.smashingmagazine.com/2017/12/grid-inspector/
Và cho một số cảm hứng:
- //www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/
Sự khác biệt chính giữa justify-content, justify-items và justify-self trong Lưới CSS:
- Thuộc tính justify-content kiểm soát sự liên kết của các cột lưới. Nó được đặt trên thùng chứa lưới. Nó không áp dụng cho hoặc kiểm soát sự liên kết của các mục lưới.
- Thuộc tính justify-items kiểm soát sự liên kết của các mục lưới. Nó được đặt trên thùng chứa lưới.
- Thuộc tính justify-self ghi đè justify-items trên các mục riêng lẻ. Nó được đặt trên các mục lưới và kế thừa giá trị của justify-items, theo mặc định.
Thí dụ
Đây là lưới 2x3.
- 2 cột, mỗi cột rộng 100px
- 3 hàng, mỗi hàng cao 50px
Container là:
- Rộng 500px
- Cao 250px
.container { display: grid; grid-template-columns: 100px 100px; grid-template-rows: 50px 50px 50px; width: 500px; height: 250px; grid-template-areas: " one two" " three four" " five six "; } .box:nth-child[1] { grid-area: one; } .box:nth-child[2] { grid-area: two; } .box:nth-child[3] { grid-area: three; } .box:nth-child[4] { grid-area: four; } .box:nth-child[5] { grid-area: five; } .box:nth-child[6] { grid-area: six; } /* non-essential decorative styles */ body { display: flex; justify-content: center; } .container { background-color: #ddd; border: 1px solid #aaa; } .box { background-color: lightgreen; border: 1px solid gray; display: flex; justify-content: center; align-items: center; font-size: 1.2em; }
justify-content
Thuộc tính justify-content căn chỉnh cột trong vùng chứa.
.container { justify-content: space-between; } .container { display: grid; grid-template-columns: 100px 100px; grid-template-rows: 50px 50px 50px; width: 500px; height: 250px; grid-template-areas: " one two" " three four" " five six "; } .box:nth-child[1] { grid-area: one; } .box:nth-child[2] { grid-area: two; } .box:nth-child[3] { grid-area: three; } .box:nth-child[4] { grid-area: four; } .box:nth-child[5] { grid-area: five; } .box:nth-child[6] { grid-area: six; } /* non-essential decorative styles */ body { display: flex; justify-content: center; } .container { background-color: #ddd; border: 1px solid #aaa; } .box { background-color: lightgreen; border: 1px solid gray; display: flex; justify-content: center; align-items: center; font-size: 1.2em; }
Với justify-content: space-between cả hai cột được ghim vào các cạnh. Các mục lưới thay đổi chỉ vì chúng tồn tại bên trong các cột. Họ không bị ảnh hưởng.
Lưu ý rằng tài sản này chỉ hoạt động khi có không gian trống trong container. Nếu bất kỳ cột nào có kích thước bằng fr, thì tất cả không gian trống sẽ bị tiêu tốn và justify-content sẽ không có hiệu lực.
justify-items
Thuộc tính justify-items căn chỉnh các mục lưới trong các rãnh của chúng [không phải toàn bộ vùng chứa]
.container { justify-items: center; } .container { display: grid; grid-template-columns: 100px 100px; grid-template-rows: 50px 50px 50px; width: 500px; height: 250px; grid-template-areas: " one two" " three four" " five six "; } .box:nth-child[1] { grid-area: one; } .box:nth-child[2] { grid-area: two; } .box:nth-child[3] { grid-area: three; } .box:nth-child[4] { grid-area: four; } .box:nth-child[5] { grid-area: five; } .box:nth-child[6] { grid-area: six; } /* non-essential decorative styles */ body { display: flex; justify-content: center; } .container { background-color: #ddd; border: 1px solid #aaa; } .box { background-color: lightgreen; border: 1px solid gray; display: flex; justify-content: center; align-items: center; font-size: 1.2em; }
Với justify-items: center, các mục lưới được căn giữa trong các cột của chúng.
justify-self
Thuộc tính justify-self ghi đè justify-items trên các mục riêng lẻ.
.container { justify-items: center;} .box:nth-child[2] { justify-self: start; } .box:nth-child[3] { justify-self: end; } .box:nth-child[6] { justify-self: stretch; } .container { display: grid; grid-template-columns: 100px 100px; grid-template-rows: 50px 50px 50px; width: 500px; height: 250px; grid-template-areas: " one two" " three four" " five six "; } .box:nth-child[1] { grid-area: one; } .box:nth-child[2] { grid-area: two; } .box:nth-child[3] { grid-area: three; } .box:nth-child[4] { grid-area: four; } .box:nth-child[5] { grid-area: five; } .box:nth-child[6] { grid-area: six; } /* non-essential decorative styles */ body { display: flex; justify-content: center; } .container { background-color: #ddd; border: 1px solid #aaa; } .box { background-color: lightgreen; border: 1px solid gray; display: flex; justify-content: center; align-items: center; font-size: 1.2em; }
align-content, align-items và align-self
Các thuộc tính này làm tương tự như các đối tác justify-* của chúng, nhưng theo hướng vuông góc.
Xem thêm tại đây: Sự khác biệt giữa align-item so với align-content trong Grid Layout là gì?
Tham chiếu thông số
10.3. Căn chỉnh trục hàng: justify-self và justify-items tính chất
Các mục lưới có thể được căn chỉnh theo thứ nguyên nội tuyến bằng cách sử dụng Thuộc tính justify-self trên mục lưới hoặc thuộc tính justify-items trên thùng chứa lưới.
10,4. Căn chỉnh trục cột: align-self và align-items tính chất
Mục lưới cũng có thể được căn chỉnh theo kích thước khối [vuông góc Với kích thước nội tuyến] bằng cách sử dụng thuộc tính align-self trên mục lưới hoặc thuộc tính align-items trên thùng chứa lưới.
10,5. Căn chỉnh lưới: justify-content và align-content tính chất
Nếu lưới bên ngoài cạnh không tương ứng với thùng chứa lưới các cạnh nội dung [ví dụ: nếu không có cột nào có kích thước uốn cong], lưới các bản nhạc được căn chỉnh trong hộp nội dung theo Các thuộc tính justify-content và align-content trên lưới thùng đựng hàng.
[nhấn mạnh thêm]
Mô đun sắp xếp hộp CSS
Bạn đã viết:
Thuộc tính justify-items trong hộp Flex có giống với thuộc tính justify-items trong Lưới không?
Mặc dù thông số kỹ thuật Flex và Grid cung cấp định nghĩa riêng cho các thuộc tính căn chỉnh từ khóa, chẳng hạn như justify-items và align-content, W3C đang trong quá trình loại bỏ các thuộc tính căn chỉnh cho các mô hình hộp riêng lẻ và triển khai Mô đun căn chỉnh mới Box , tìm cách xác định một tập các thuộc tính căn chỉnh để sử dụng trên tất cả các kiểu hộp.
Từ thông số kỹ thuật flexbox :
1.2. Mô-đun tương tác
Mô-đun căn chỉnh hộp CSS mở rộng và thay thế các định nghĩa của các thuộc tính căn chỉnh [justify-content, align-items, align-self, align-content] được giới thiệu ở đây.
Có các tham chiếu tương tự trong thông số Grid.
OK, tôi nghĩ rằng tôi đã tìm ra nó nhờ Michael_B. Sự nhầm lẫn của tôi đến từ thực tế là đôi khi các thuộc tính khác nhau sẽ ngẫu nhiên không thay đổi bất cứ điều gì về bố cục của lưới.
justify-content cho phép bạn định vị lưới trong thùng chứa lưới. Đây là lý do tại sao thuộc tính nội dung justify sẽ không có hiệu lực nếu thùng chứa lưới có cùng kích thước với lưới. [Đó luôn là trường hợp nếu bạn sử dụng đơn vị fr]. Đây cũng là lý do tại sao nó có thể có các giá trị: không gian xung quanh, không gian giữa và không gian đồng đều [Ngoài bắt đầu, kết thúc, giữa và kéo dài], sẽ phá vỡ lưới và đặt các mục lưới trong thùng chứa lưới. Đây là một thuộc tính của thùng chứa lưới .
justify-items cho phép bạn đặt vị trí mặc định cho nội dung được đặt trong các mục lưới của lưới [Một mục lưới là một hộp trong lưới, như được xác định trong bài đăng của Michael_B]. Đây là một thuộc tính của thùng chứa lưới .
justify-self cho phép bạn ghi đè vị trí mặc định của nội dung trong một ô riêng lẻ. Điều này sẽ ghi đè vị trí được đặt bởi các mục justify. Do đó, nếu bạn sử dụng justify-self cho tất cả trẻ em của container, việc đặt các vật phẩm justify trên thùng chứa lưới sẽ không có hiệu lực. Đây là một thuộc tính của nội dung bên trong một mục lưới .
Lưu ý: Nếu bạn tự tạo một mục lưới thành một lưới, [Nói cách khác, nội dung bên trong một mục lưới là một lưới] thì bạn có thể định vị nó trong mục lưới bên ngoài bằng cách sử dụng thuộc tính tự biện minh hoặc nội dung biện minh thuộc tính trên bộ chứa lưới của lưới bên trong, vì bộ chứa lưới của lưới bên trong là một trong những nội dung của các mục của lưới bên ngoài.
Như bạn có thể mong đợi, tất cả điều này cũng áp dụng cho các thuộc tính align- *.
Xin hãy sửa tôi nếu tôi có gì sai
Justify-self là để căn chỉnh vị trí của nội dung trong ô của nó theo chiều ngang.
Trong khi align-self là để căn chỉnh vị trí của nội dung trong ô theo chiều dọc.
Đây là kết quả để căn chỉnh các mục bằng cách sử dụng justify-self: start;
KẾT QUẢ CHO MÃ justify-self: start;