Các bài viết liên quan:
align-items
trong CSS là một thuộc tính dùng để căn chỉnh các thành phần trong một container dựa trên trục ngang. Nó chỉ hoạt động khi container được đặt là flex container. Nó có thể có các giá trị sau:
flex-start
(mặc định) – căn chỉnh các thành phần về đầu trục ngangcenter
– căn chỉnh các thành phần giữa trục ngangflex-end
– căn chỉnh các thành phần về cuối trục ngangstretch
– kéo các thành phần để đạt chiều cao của containerbaseline
– căn chỉnh các thành phần dựa trên dòng chữ cơ bản của chúng
Ví dụ:
.container { display: flex; align-items: center; /* aligns items to the center of the cross axis */ }
Trong ví dụ trên, tất cả các thành phần trong container sẽ được căn chỉnh giữa trục ngang.
align-items
có thể sử dụng với các giá trị khác nhau tùy thộc vào nhu cầu của bạn. Ví dụ nếu bạn muốn căn chỉnh tất cả các thành phần về cuối trục ngang bạn có thể sử dụng align-items: flex-end;
.
Cần lưu ý rằng align-items
chỉ có tác dụng trên các thành phần trong container và chỉ áp dụng trên trục ngang của container, nếu bạn muốn căn chỉnh thành phần trên trục dọc, bạn có thể sử dụng thuộc tính align-content
hoặc align-self
cho từng thành phần riêng.
Để sử dụng đúng các thuộc tính căn chỉnh trong CSS, bạn cần phải hiểu rõ các thuộc tính đó và cách chúng hoạt động, bạn cũng cần phải xem xét nhu cầu và mục tiêu của giao diện của bạn để chọn thuộc tính phù hợp.
Một số ví dụ về align-items trong css
- Ví dụ 1:
.container { display: flex; align-items: flex-start; /* aligns items to the top of the cross axis */ }
Trong ví dụ này, tất cả các thành phần trong container sẽ được căn chỉnh về đầu trục ngang.
- Ví dụ 2:
.container { display: flex; align-items: center; /* aligns items to the center of the cross axis */ }
Trong ví dụ này, tất cả các thành phần trong container sẽ được căn chỉnh giữa trục ngang.
- Ví dụ 3:
.container { display: flex; align-items: flex-end; /* aligns items to the bottom of the cross axis */ }
Trong ví dụ này, tất cả các thành phần trong container sẽ được căn chỉnh về cuối trục ngang.
- Ví dụ 4:
.container { display: flex; align-items: stretch; /* stretches items to match the height of the container */ }
Trong ví dụ này, tất cả các thành phần trong container sẽ được kéo để đạt chiều cao của container.
- Ví dụ 5:
.container { display: flex; align-items: baseline; /* aligns items to the baseline of the container */ }
Trong ví dụ này, tất cả các thành phần trong container sẽ được căn chỉnh dựa trên dòng chữ cơ bản của chúng.