Justify-content space-between trong css
|
Flexbox lời hẹn sẽ giải quyết nhiều vấn đề hiện đang tồn tại trong CSS thuần (ví dụ như căn chỉnh chiều dọc). Nhưng để có thể làm chủ và sử dụng được flexbox thì lại là việc không hề dễ dàng Show Nguyên tắc cơ bản của Flexbox là làm cho công việc dàn trang linh hoạt và trực quan hơn. Để thực hiện điều này, các thành phần bao bên ngoài (container) được quyết định tự do cách phân bố các phần tử con (item) – bao gồm cả kích thước và khoảng cách giữa chúng Trong bài viết này, chúng tôi sẽ nghiên cứu 5 thuộc tính nổi bật nhất của Flexbox, khám phá chức năng cũng như cách sử dụng chúng và kết quả đạt được Thuộc tính #1. Trưng bày. Uốn congVui lòng xem ví dụ trang web dưới đây  Có 4 kích thước thẻ div khách nhau được đánh dấu bằng các màu khác nhau được đặt trong vùng chứa thẻ div màu xám. Mặc định mỗi thẻ div sẽ có thuộc tính là hiển thị. khối. Vì vậy, mỗi ô vuông sẽ chiếm hết chiều ngang của mỗi dòng Để bắt đầu với Flexbox, bạn cần đưa bộ chứa của bạn về định dạng của bộ chứa flex như sau #container {
display: flex;
}
Không có gì thay đổi ngoài việc thẻ div hiển thị trên cùng một dòng. Tuy nhiên đây lại là một sự thay đổi rất đáng kể. And they ta call it is a flex context Bây giờ bạn có thể bắt đầu định vị trí cho chúng mà không gặp nhiều khó khăn như khi sử dụng CSS thông thường Thuộc tính #2. Hướng linh hoạtMột hộp chứa Flexbox có hai phần. một trục chính (trục chính) và một trục dọc góc với trục chính (trục ngang) mặc định được hiển thị như dưới đây Mặc định, các hạng mục được sắp xếp theo hướng của trục chính, từ trái qua phải. Đây là lý do tại sao các ô vuông hiển thị trên cùng một dòng khi bạn sử dụng màn hình. uốn cong Tuy nhiên, bạn có thể thay đổi trục chính bằng thuộc tính flex-direction #container {
display: flex;
flex-direction: column;
}
Có một sự khác biệt quan trọng được tạo ra ở đây. hướng uốn. cột không sắp xếp các ô vuông trên trục dọc (trục ngang) thay vì trục chính (trục chính). Mà là thay đổi chính của trục chính, xoay từ ngang thành dọc Bạn có thể sắp xếp flex-direction theo một số cách khác như. row-reverse (hiển thị theo hàng nhưng đảo ngược vị trí các mục) và column-reverse (hiển thị theo cột nhưng đổi ngược vị trí các mục) Thuộc tính #3. Biện minh cho Nội dungjustify-content sắp xếp các mục theo trục chính Chúng ta sẽ nghiên cứu chi tiết hơn về sự khác nhau giữa thép chính và thép góc với nó. Trước hết, hãy quay lại với flex-direction. chèo thuyền #container {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
Với thuộc tính justify-content , bạn có 5 giá trị tùy chọn sử dụng
Sự khác nhau giữa không gian xung quanh và không gian giữa hơi khó nhận ra. With space-between, các ô vuông sẽ được căn cách đều nhau, không bao gồm khoảng cách giữa các ô vuông đầu và cuối với vùng chứa Trong khi đó, với không gian xung quanh, các ô vuông khoảng cách đều được căn cách nhau ở cả hai bên. Có nghĩa là khoảng cách giữa các ô vuông bên ngoài cùng phía đầu và cuối cùng với container sẽ bằng một nửa khoảng cách giữa các ô vuông với nhau (Giả sử mỗi ô vuông đều có một giá trị căn lề bằng nhau và không bị ghi đè, bởi vì Chú thích. Xin lưu ý rằng thuộc tính biện minh cho nội dung hoạt động theo trục chính và hướng linh hoạt làm thay đổi trục chính. Đây là điều quan trọng nhất để bạn chuyển sang phần tiếp theo Thuộc tính #4. Căn chỉnh các mụcNếu như bạn đã nắm được thuộc tính justify-content thì bạn sẽ không gặp khó khăn với thuộc tính align-items Trong khi thuộc tính justify-content hoạt động theo trục chính, thuộc tính align-items lại áp dụng đối với trục dọc (trục ngang) Please setting back flex-direction. row to the twos display as the top Tiếp theo, chúng ta hãy tìm hiểu về các giá trị của thuộc tính align-items
3 first value same as value of property justify-content. Tuy nhiên, 2 value after thì có đôi chút khác biệt Với giá trị kéo dài, các mục sẽ tự động kéo theo chiều cao để vừa với vùng chứa Với đường cơ sở, các mục sẽ được xếp hạng theo phần cuối của thẻ Inside Chú thích. Đối chiếu với giá trị align-items. độ giãn, chiều cao của các ô vuông đã được đặt chiều cao. tự động để tránh bị ghi đè bởi thuộc tính cao Với giá trị cơ bản, hãy cẩn thận nếu bạn bỏ thẻ , các ô vuông sẽ được căn lề bên dưới như hình sau Để minh họa rõ ràng hơn cho trục chính và khung góc với nó, hãy kết hợp thuộc tính justify-content với thuộc tính align-items và xem sự khác biệt giữa 2 giá trị trung tâm của flex-direction Với hàng, các ô vuông hiển thị ngang theo thành phần chính. Với cột, các ô vuông hiển thị theo chiều dọc theo chiều dọc Các ô vuông được căn giữa cả theo trục ngang và dọc trong 2 trường hợp, cả 2 trường hợp đều không thay đổi Thuộc tính #5. Tự căn chỉnhThuộc tính align-self cho phép bạn sắp xếp một mục cụ thể Nó sẽ đảo ngược thuộc tính align-item của 1 ô vuông (mục). Tất cả các thuộc tính đều như nhau, bởi vì mặc định nó là tự động, nên các ô vuông sẽ theo thuộc tính align-items của container bao nó #container {
align-items: flex-start;
}
.square#one {
align-self: center;
}
// Chỉ ô vuông #one được căn giữa.
Vui lòng xem kết quả. Đặt thuộc tính align-self cho 2 ô vuông và thuộc tính align-items. trung tâm và hướng linh hoạt. hàng với các ô còn lại Lời kếtMặc dù chỉ là những người tìm hiểu cơ bản về Flexbox, tôi tin những điều này cũng cung cấp cho bạn những kiến thức để dàn trang một cách cơ bản nhất cũng như sắp xếp nội dung chính bài viết của bạn |
