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

Tóm tắt nội dung

Cú pháp của align-items trong CSS

Thuộc tính align-items trong CSS được sử dụng để căn chỉnh các phần tử con của một container theo trục chính (main axis). Thuộc tính này chỉ áp dụng cho các phần tử có display là flex hoặc grid.

Cú pháp:

.container {
  align-items: stretch | center | flex-start | flex-end | baseline;
}

Trong đó:

stretch (giá trị mặc định): Các phần tử con sẽ được căn chỉnh sao cho chiều cao của chúng bằng chiều cao của container.
center: Các phần tử con sẽ được căn giữa theo trục chính của container.
flex-start: Các phần tử con sẽ được căn chỉnh theo bên trái của container (hoặc bên trên nếu trục chính là trục ngang).
flex-end: Các phần tử con sẽ được căn chỉnh theo bên phải của container (hoặc bên dưới nếu trục chính là trục ngang).
baseline: Các phần tử con sẽ được căn chỉnh theo đường baseline của chúng (chỉ áp dụng khi các phần tử có chiều cao khác nhau).

Thêm vào đó, ta còn có thể sử dụng giá trị safe và unsafe để chỉ định vị trí bắt đầu của các phần tử con trong trường hợp không đủ không gian hiển thị.

.container {
  align-items: safe | unsafe | stretch | center | flex-start | flex-end | baseline;
}

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.

Cách sử dụng align-items trong CSS

Để sử dụng align-items trong CSS, bạn cần áp dụng thuộc tính này cho phần tử cha của các phần tử cần được căn chỉnh. Cú pháp sử dụng như sau:

.container {
  display: flex;
  align-items: giá_trị;
}

Trong đó:

.container là class của phần tử chứa các phần tử cần căn chỉnh.
display: flex sẽ cho phép áp dụng các thuộc tính của flexbox vào các phần tử con của phần tử .container.
align-items là thuộc tính quy định cách các phần tử con được căn chỉnh theo trục dọc.
giá_trị là giá trị của thuộc tính align-items, bao gồm:
- stretch: căn chỉnh các phần tử con sao cho chiều cao của chúng bằng nhau.
- center: căn chỉnh các phần tử con vào giữa phần tử cha.
- flex-start: căn chỉnh các phần tử con về đầu của phần tử cha.
- flex-end: căn chỉnh các phần tử con về cuối của phần tử cha.
- baseline: căn chỉnh các phần tử con sao cho các baseline của chúng bằng nhau.

Ví dụ:

<div class="container">
  <div class="item">Phần tử 1</div>
  <div class="item">Phần tử 2</div>
  <div class="item">Phần tử 3</div>
</div>

.container {
  display: flex;
  align-items: center;
}
.item {
  background-color: lightblue;
  padding: 10px;
  margin: 5px;
}

Trong ví dụ này, các phần tử con trong phần tử .container sẽ được căn chỉnh vào giữa phần tử cha.

Các giá trị của align-items trong CSS

Các giá trị của align-items trong CSS:

stretch (giá trị mặc định): Phần tử sẽ được kéo dãn để đạt đến chiều cao của container.
center: Phần tử sẽ được căn giữa theo chiều dọc của container.
flex-start: Phần tử sẽ được căn bên trên theo chiều dọc của container.
flex-end: Phần tử sẽ được căn bên dưới theo chiều dọc của container.
baseline: Phần tử sẽ được căn theo đường chân của chữ.
initial: Thiết lập giá trị ban đầu của thuộc tính.
inherit: Kế thừa giá trị của phần tử cha.

Chúng ta có thể sử dụng các giá trị này để căn chỉnh vị trí của các phần tử trong container theo chiều dọc.

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.

Xem thêm Chuỗi tùy chọn Swift

CSS

align-items trong css

Cú pháp của align-items trong CSS

Cách sử dụng align-items trong CSS

Các giá trị của align-items trong CSS

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

Trả lời Hủy