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
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ínhalign-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