Rate this post

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 ngang
center – căn chỉnh các thành phần giữa trục ngang
flex-end – căn chỉnh các thành phần về cuối trục ngang
stretch – kéo các thành phần để đạt chiều cao của container
baseline – 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.

CSS

align-items trong css

Một số ví dụ về align-items trong css

Trả lời Hủy