Helpex - Trao đổi & giúp đỡ Đăng nhập
103

Tôi đang rất khó hiểu sự khác biệt là gì? Từ nghiên cứu của tôi nó có vẻ như justify-contentcó thể làm ... space-betweenspace-around, trong khi align-itemscó thể làm ... stretch, baseline, initialinherit?

Cũng giống như cả hai thuộc tính chia sẻ flex-start, flex-endcenter.

Có và không có lợi thế khi sử dụng cái này hơn cái kia hay chỉ là sở thích? Tôi cảm thấy như họ là cách tương tự như chỉ làm điều tương tự. Bất cứ ai biết sự khác biệt? cảm ơn!!

103 hữu ích 5 bình luận 72k xem chia sẻ
242

Ghi chú:

Các XY hướng trục / liên kết có thể thay đổi tùy thuộc nếu bạn đang sử dụng flex-direction: hàng hoặc cột

1. justify-content:Ngang

Căn chỉnh & Khoảng cách dọc theo trục chính (trục X)

flex-start;Căn chỉnh trẻ em theo chiều ngang sang trái

flex-end;Căn chỉnh trẻ em theo chiều ngang sang phải

center;Trẻ em Align ngang làm trung tâm (Amaze!)

space-between;Phân phối trẻ theo chiều ngang đồng đều trên toàn bộ chiều rộng

space-around;Phân phối trẻ theo chiều ngang đồng đều trên toàn bộ chiều rộng (nhưng có khoảng trống trên các cạnh

2. align-items:Dọc

Chỉ căn chỉnh dọc theo trục phụ (trục Y)

flex-start;Căn chỉnh trẻ em theo chiều dọc trên cùng

flex-end;Căn chỉnh trẻ em theo chiều dọc dưới cùng

center;Trẻ em Align theo chiều dọc làm trung tâm (Amaze!)

baseline;Căn chỉnh trẻ em theo chiều dọc để các đường cơ sở của chúng thẳng hàng (không thực sự hoạt động)

stretch;Buộc trẻ em phải có chiều cao của thùng chứa (tuyệt vời cho cột)

Xem nó trong hành động:

http://codepen.io/enxaneta/full/adLPwv/

Theo ý kiến ​​của tôi:

Chúng nên được đặt tên là:

flex-x: trái hoặc phải hoặc trung tâm hoặc kéo dài hoặc không gian giữa hoặc không gian xung quanh

flex-y: trái hoặc phải hoặc trung tâm hoặc kéo dài

Nhưng với html, bạn không bao giờ có thể có những thứ tốt đẹp. Không bao giờ.

242 hữu ích 5 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ css flexbox , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading