Trong CSS Flexbox, tại sao không có các thuộc tính của justify-vật phẩm nào?

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

Để sắp xếp các mặt hàng flex 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 vấn đáp hoàn toàn có thể là : Bởi vì chúng không thiết yếu .Đặc tả flexbox cung ứng hai giải pháp để chỉnh sửa những mục flex dọc theo trục chính :

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

nội dung biện minh

Các justify-contenttài sản gắn mục flex dọc theo trục chính của container flex.

Nó được vận dụng cho container flex nhưng chỉ ảnh hưởng tác động đến những mục flex .Có năm tùy chọn chỉnh sửa :

• 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ặt hàng Flex được đặt cách đều nhau, với mặt hàng đầu tiên được căn chỉnh theo một cạnh của thùng chứa và mặt hàng 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 container flex, autolề đi vào các mục flex.

Họ thao tác bằng cách tiêu thụ tổng thể khoảng trống trống theo hướng được chỉ định .

Sắp xếp 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 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 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 hoàn toà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 những mục flex bằng cách phân phối khoảng trống trống .Do đó, để tạo ra sự cân đối như nhau, để một vật phẩm ở giữa hoàn toàn 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 những ví dụ dưới đây, những mục flex thứ ba vô hình dung ( hộp 61 và 68 ) được trình làng để cân đối những mục ” thực ” ( hộp 63 và 66 ) .

Tất nhiên, giải 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 giải trí – về mặt định tâm thực sự – khi những mục ngoài cùng có chiều cao / chiều rộng bằng nhau. Khi những 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 liên quan đến 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ụ).

Hiển thị đoạn mã

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

id=" center "
>
Xem thêm: Khóa Học Lập Trình Java Uy Tín Ở Hà Nội, TPHCM – Techacademy 
TRUE CENTER

.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:1 pxsolid# ccc;background-color:lightgreen;height:40 px;}

class=" container ">
class=" box box71 "
>
71 short

Xem thêm: Pesudo class trong CSS – Tự học CSS

Source: https://final-blade.com
Category: Kiến thức Internet