Justify-content và Align-items là hai thuộc tính CSS được sử dụng để điều chỉnh vị trí và căn chỉnh các phần tử trong một container.
- Justify-content: Thuộc tính này được sử dụng để căn chỉnh và điều chỉnh khoảng cách giữa các phần tử theo chiều ngang, từ trái sang phải. Có thể sử dụng các giá trị như flex-start (bắt đầu từ bên trái), flex-end (kết thúc ở bên phải), center (căn giữa), space-between (chia đều khoảng cách giữa các phần tử) và space-around (chia đều khoảng cách xung quanh các phần tử).
- Align-items: Thuộc tính này được sử dụng để căn chỉnh các phần tử theo chiều dọc, từ trên xuống dưới. Có thể sử dụng các giá trị như flex-start (bắt đầu từ đầu container), flex-end (kết thúc ở cuối container), center (căn giữa), baseline (căn chỉnh theo đường cơ sở của phần tử) và stretch (kéo căng phần tử để lấp đầy container).
Như vậy, Justify-content và Align-items có vai trò quan trọng trong việc định vị và căn chỉnh các phần tử trong một container theo chiều ngang và chiều dọc.
Justify-content (định giá)
Đây là một trong những thuộc tính hữu ích nhất trong flexbox. Nó cung cấp sự căn chỉnh theo trục chính, phân phối không gian trống theo một thứ tự. Hãy hiểu rõ hơn qua việc trực quan hoá.
Cũng có các giá trị start | end | left | right, nhưng chúng ta không sử dụng thường xuyên.
- Flex-start (mặc định): các phần tử được căn chỉnh về phía đầu của flex-direction.
- Flex-end: về phía cuối.
- center: tại trung tâm.
- space-between: Các phần tử được phân bố đều trên đường dọc; phần tử đầu tiên ở trên đường bắt đầu, phần tử cuối cùng ở trên đường kết thúc.
- space-around: Các phần tử được phân bố đều trên đường dọc với không gian bằng nhau xung quanh chúng. Mỗi phần tử có cùng một khoảng cách xung quanh chúng, xem biểu đồ minh họa kỹ lưỡng.
- space-evenly: Các phần tử được phân bố sao cho khoảng cách giữa hai phần tử bất kỳ (và khoảng cách đến mép) là bằng nhau.
Align-items (định vị hàng)
Điều này đưa ra vị trí trên trục chéo của flex-direction. Nó giống với justify-content nhưng trên trục chéo. Các giá trị của nó là:
Tất cả các giá trị đều khá dễ hiểu:
stretch (mặc định): căng ra để lấp đầy container.
flex-start: các phần tử được đặt ở phía đầu của trục chéo.
flex-end: các phần tử được đặt ở phía cuối của trục chéo.
center: các phần tử được căn giữa trên trục chéo.
baseline: các phần tử được căn chỉnh sao cho các baseline của chúng trùng nhau.
Đó là tất cả về justify-content và align-items.
Đây là một phần trong bài viết hướng dẫn hoàn chỉnh của tôi về Flexbox trên trang web Ok Chơi 2. Hy vọng bạn thích nó, nếu có thì hãy xem hướng dẫn hoàn chỉnh trên trang web của tôi. Chúc bạn thành công trong việc lập trình 🙂
