Hướng dẫn align-items css

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article) Dai Phong (you can also view the original English article)

Nội dung chính Show

Câu chuyện về hai Trục toạ độ
Bắt đầu bằng cách xác định trục chính
1. Left to Right: row
2. Right to Left: row-reverse
3. Top to Bottom: column
4. Bottom to Top: column-reverse
Flex-flow Shorthand
Thuộc tính căn chỉnh Flexbox
Căn chỉnh dọc theo trục chính
Căn dọc theo trục dọc
Căn chỉnh một dòng
Căn chỉnh nhiều dòng
Tóm tắt

Căn chỉnh có lẽ là khía cạnh khó hiểu nhất của flexbox. Mô-đun flexbox layout có một số thuộc tính căn chỉnh hành xử khác nhau trong các trường hợp khác nhau và khi sử dụng chúng, có thể bạn không nhất thiết phải hiểu những gì đang xảy ra hoặc tại sao. Tuy nhiên, nếu bạn biết phải lưu ý điều gì, việc căn chỉnh sẽ ít phức tạp hơn so với lần đầu tiên. Hướng dẫn này sẽ giúp bạn hiểu căn chỉnh flexbox một cách hoàn chỉnh.

Câu chuyện về hai Trục toạ độ

Khi sử dụng flexbox chúng ta làm việc với hai trục: trục chính (main) và trục dọc (cross). Như tên gọi của chúng, các trục này tạo thành một mối quan hệ phân cấp, trục chính nằm trên trục dọc.

Hướng dẫn align-items css - align-items css

Trục dọc luôn vuông góc với trục chính.

Mối quan hệ phân cấp này tạo nên sự khác biệt chính giữa flexbox và CSS Grid Layout. Theo thiết kế, CSS Grid có hai trục không phân cấp: trục hàng (row) và trục cột (column). Điều này là do những người tạo ra các tiêu chuẩn web dự định CSS Grid sẽ được sử dụng như là một mô hình bố cục hai chiều. Mặt khác, Flexbox có một trục chính và một trục phụ, vì mục đích của nó là mô hình bố cục một chiều. Phần thú vị của flexbox là bạn có thể xác định hướng của một chiều bằng cách thiết lập vị trí của trục chính, do đó bạn có thể tạo cả bố cục dựa trên hàng và dựa trên cột.

Để tránh bị nhầm lẫn bởi các thuộc tính căn chỉnh, hãy luôn nhớ rằng khi bạn sử dụng flexbox, bạn đang làm việc với mô hình một chiều. Ngay cả khi bố cục của bạn trông giống như có hai chiều (nghĩa là hàng và cột), các phần tử flex chỉ có thể chảy theo một hướng, dọc theo trục chính. Bạn có thể dàn các phần tử flex theo một hướng đó và căn chỉnh khoảng cách giữa các phần tử riêng lẻ dọc theo trục dọc.

Bắt đầu bằng cách xác định trục chính

Hướng của trục chính được xác định bởi thuộc tính flex-direction có thể có bốn giá trị:

flex-direction: row; – trục chính chạy từ trái sang phải (mặc định)
flex-direction: row-reverse; – trục chính chạy từ phải sang trái
flex-direction: column; – trục chính chạy từ trên xuống dưới

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

0 – trục chính chạy từ dưới lên trên

Hãy xem điều này trông như thế nào trong trình duyệt. Tôi sẽ sử dụng mã HTML rất đơn giản, chỉ chín hộp xếp chồng lên nhau:

Div bên ngoài với lớp

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

1 sẽ là thùng chứa flex và div bên trong với lớp

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

2 sẽ là các phần tử flex.

1. Left to Right: row

Như đã đề cập, hướng flex mặc định là

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

3; nếu bạn không thiết lập gì khác thì đây sẽ là giá trị được sử dụng. Như bạn có thể thấy bên dưới, tôi chỉ thêm các thuộc tính liên quan đến flexbox vào thùng chứa flex. Các phần tử flex đã áp dụng một số thuộc tính với mục đích trang trí:

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

Khi

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

4 là

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

3, trục chính chạy theo chiều ngang, từ trái sang phải. Do đó, đây là hướng mà theo đó các phần tử flex được bố trí. Trục dọc chạy vuông góc, từ trên xuống dưới và khi các phần tử bao bọc chúng làm theo hướng này.

2. Right to Left: row-reverse

Khi flex-direction được gán giá trị

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

6, vị trí của các trục vẫn giữ nguyên, có nghĩa là trục chính vẫn sẽ chạy theo chiều ngang và trục dọc theo chiều dọc. Tuy nhiên, hướng hàng sẽ bị đảo ngược: từ phải sang trái dọc theo trục chính.

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

Nếu bạn nhìn vào số thứ tự của các phần tử flex bạn có thể thấy bây giờ, mỗi hàng được đánh số từ phải sang trái, nhưng các phần tử vẫn bao bọc theo chiều dọc trở xuống.

Nếu bạn cũng muốn đảo ngược hướng của trục dọc, bạn cần sử dụng

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

7 thuộc tính

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

8. Lưu ý sự khác biệt:

3. Top to Bottom: column

Khi

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

4 là

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

0, trục chính và trục dọc thay đổi vị trí của chúng. Trục chính sẽ chạy theo chiều dọc (từ trên xuống dưới) và trục dọc sẽ chạy theo chiều ngang (từ trái sang phải).

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 35rem; /* so that items wrap */
}

Bây giờ bạn sẽ thấy các phần tử flex không chạy theo hàng nữa, mà là theo cột. Đây là nơi mà bản chất một chiều của flexbox có lẽ là dễ thấy nhất. Các phần tử sẽ chỉ bị bao bọc nếu thùng chứa được thiết lập một chiều cao cố định.

4. Bottom to Top: column-reverse

Tôi hy vọng bạn có thể nhìn thấy một mô hình phát triển ở đây. Khi

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

4 được thiết lập thành

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

2, trục chính vẫn thẳng đứng và trục dọc vẫn nằm ngang, giống như chúng ta đã thấy trong ví dụ trước. Tuy nhiên, hướng cột được đảo ngược để trục chính trỏ từ dưới lên trên.

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  max-height: 35rem; /* so that items wrap */
}

Như bạn có thể thấy bên dưới, số các phần tử flex bắt đầu ở phía dưới bên trái, di chuyển lên trên và sang phải.

Một lần nữa, để thay đổi hướng của trục dọc, bạn cần sử dụng

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

7 trên thuộc tính

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

Flex-flow Shorthand

Thuộc tính

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

5 là một shorthand cho

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

4 và

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

8. Chẳng hạn, bạn có thể sử dụng:

flex-flow: column wrap;

thay vì:

flex-direction: column; 
flex-wrap: wrap;

Thuộc tính căn chỉnh Flexbox

Căn chỉnh Flexbox có thể xảy ra dọc theo cả trục chính và trục dọc.

Một trong các thuộc tính (

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

8) thuộc về trục chính, trong khi ba thuộc tính khác (

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 35rem; /* so that items wrap */
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 35rem; /* so that items wrap */
}

1) thuộc về trục dọc.

Như bạn có thể kỳ vọng, hành vi của các thuộc tính căn chỉnh phụ thuộc vào thuộc tính flex-direction. Ví dụ,

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

8 canh chỉnh các phần tử theo chiều ngang nếu

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

4 là

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

3 hoặc

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

6, nhưng theo chiều dọc nếu

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

4 là

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

0 hoặc

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

2. Đây là vẻ đẹp thật sự của flexbox.

Căn chỉnh dọc theo trục chính

Thuộc tính justify-content sắp xếp các phần tử flex trong thùng chứa flex dọc theo trục chính. Nó phân phối khoảng trống còn lại sau khi trình duyệt đã tính không gian cần thiết cho tất cả các phần tử trong thùng chứa flex. Thuộc tính justify-content có thể có năm giá trị:

```
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 35rem; /* so that items wrap */
}
```
9 - các phần tử flex được giãn ra theo hướng bắt đầu của trục chính (đây là mặc định)

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  max-height: 35rem; /* so that items wrap */
}

0 - Các phần tử flex được giãn ra ở cuối của trục chính

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  max-height: 35rem; /* so that items wrap */
}

1 - các phần tử flex được giãn ở xung quanh tâm của trục chính

```
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  max-height: 35rem; /* so that items wrap */
}
```
2 - các phần tử flex được phân bổ đều nhau dọc theo trục chính, từ flex-start đến flex-end
```
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  max-height: 35rem; /* so that items wrap */
}
```
3 - các phần tử flex được phân bổ đều dọc theo trục chính, nhưng nửa khoảng trống được thêm vào mỗi đầu

Để sử dụng

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

8 đúng cách, bạn cần chú ý đến các hướng của trục. Chẳng hạn,

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  max-height: 35rem; /* so that items wrap */
}

5 luôn luôn dồn các phần tử flex vào đầu trục chính. Đây là đầu bên trái khi flex-direction là

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

3, đầu bên phải khi nó là

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

6, điểm cao nhất khi nó là

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

0 và điểm dưới cùng khi là

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

Pen sau đây cho thấy các giá trị khác nhau của thuộc tính

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

8 căn chỉnh các phần tử flex khi flex-direction là

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

Căn dọc theo trục dọc

Đây là lúc để nâng mọi thứ lên cấp độ tiếp theo. Bạn có thể sử dụng ba thuộc tính CSS để căn chỉnh các phần tử dọc theo trục dọc. Hai trong số chúng (

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

9 và

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 35rem; /* so that items wrap */
}

0) dành cho căn chỉnh một dòng, trong khi

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 35rem; /* so that items wrap */
}

1 là để căn chỉnh nhiều dòng.

Căn chỉnh một dòng

Các thuộc tính

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

9 và

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 35rem; /* so that items wrap */
}

0 xác định khoảng không gian giữa các phần tử flex dọc theo trục dọc. Trong thực tế, cả hai đều tương tự, nhưng trong khi

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

9 sẽ căn chỉnh tất cả các phần tử bên trong thùng chứa flex,

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 35rem; /* so that items wrap */
}

0 sẽ ghi đè căn chỉnh mặc định này cho các phần tử flex riêng lẻ.

Cả hai đều có thể nhận các giá trị sau:

```
flex-flow: column wrap;
```
9 - làm cho thuộc tính align-self kế thừa giá trị của align-items (mặc định cho align-self)

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 35rem; /* so that items wrap */
}

9 - các phần tử flex được căn chỉnh theo hướng bắt đầu của trục dọc

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  max-height: 35rem; /* so that items wrap */
}

0 - các phần tử flex được căn chỉnh về phía cuối trục dọc

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  max-height: 35rem; /* so that items wrap */
}

1 - các phần tử flex được căn chỉnh xung quanh tâm của trục dọc

```
flex-direction: column; 
flex-wrap: wrap;
```
3 - các phần tử flex được căn chỉnh sao cho việc căn chỉnh baseline của chúng thẳng hàng
```
flex-direction: column; 
flex-wrap: wrap;
```
4 - các phần tử flex được kéo dài dọc theo trục chéo để lấp đầy hộp chứa flex (mặc định cho align-items)

Pen bên dưới cho thấy các thuộc tính

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

9 và

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 35rem; /* so that items wrap */
}

0 hành xử khi

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

4 là row. Trục dọc theo mặc định chạy từ trên xuống dưới. Các phần tử có padding khác nhau để thay đổi chiều cao và đường cơ sở của chúng. Ví dụ, bạn có thể thấy giá trị

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 35rem; /* so that items wrap */
}

9 căng thẳng hàng các phần tử với điểm bắt đầu của trục dọc, trong khi

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  max-height: 35rem; /* so that items wrap */
}

0 căn thẳng hàng chúng đến cuối.

Về bản chất, khi

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

4 là

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

0 hoặc

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

2, bạn đang làm việc với một bố cục dựa trên cột do đó

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

9 và

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 35rem; /* so that items wrap */
}

0 sẽ căn chỉnh các phần tử theo chiều ngang.

Căn chỉnh nhiều dòng

Thuộc tính align-content giúp căn chỉnh nhiều dòng có thể dọc theo trục dọc. Nó xác định cách các phần tử flex trên nhiều dòng được đặt cách nhau. Thuộc tính align-content không có tác dụng đối với kho chứa flex một dòng (ví dụ: khi nội dung không wrap). Nó có thể nhận sáu giá trị khác nhau:

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 35rem; /* so that items wrap */
}

9 - các phần tử flex được căn chỉnh theo điểm bắt đầu của trục dọc

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  max-height: 35rem; /* so that items wrap */
}

0 - các phần tử flex được căn chỉnh đến cuối trục dọc

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  max-height: 35rem; /* so that items wrap */
}

1 - các phần tử flex được căn chỉnh xung quanh tâm của trục dọc

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  max-height: 35rem; /* so that items wrap */
}

2 - các phần tử flex được phân phối đều dọc theo trục dọc, giữa flex-start và flex-end

```
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  max-height: 35rem; /* so that items wrap */
}
```
3 - các phần tử flex được phân phối đều dọc theo trục dọc, nhưng nửa khoảng trống được thêm vào mỗi đầu
```
flex-direction: column; 
flex-wrap: wrap;
```
4 - các phần tử flex được kéo dài dọc theo trục dọc để lấp đầy hộp chứa flex (đây là mặc định)

Dưới đây, bạn có thể thấy các pen khác nhau cho thấy các giá trị khác nhau của thuộc tính

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 35rem; /* so that items wrap */
}

1 hoạt động như thế nào. Cũng như với các bản demo khác của chúng tôi, hướng trục mặc định được áp dụng.

Hai ví dụ đầu tiên không có một thuộc tính một dòng (

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

9) được xác định, do đó, bạn sẽ nhận thấy tất cả các phần tử được kéo dài theo mặc định. Trong ví dụ tiếp theo này, chúng tôi sẽ thiết lập flex-direction: row-reverse;3 sao cho các phần tử được căn chỉnh theo hướng bắt đầu của trục dọc, nhưng chúng ta sẽ thiết lập flex-direction: row-reverse;4 sao cho nội dung được căn chỉnh về phía cuối trục:

Nếu bạn đã nắm rõ được mọi thứ mà chúng ta đã tìm hiểu qua, thì bạn đã làm rất tốt! Bây giờ bạn đã có một sự hiểu biết cơ bản vững chắc về căn chỉnh flexbox.

Tóm tắt

Bạn đã làm được! Tóm lại; điều quan trọng nhất cần nhớ là bạn cần lưu ý các hướng của trục chính và trục dọc. Hãy luôn bắt đầu căn chỉnh của bạn bằng cách thiết lập thuộc tính

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

4. Để tìm hiểu thêm về căn chỉnh flexbox và áp dụng kiến thức của bạn vào thực tế, bạn cũng có thể xem các tài nguyên sau:

Tài liệu W3C chính thức để căn chỉnh flexbox Rất nặng, nhưng hữu ích; cũng là tài liệu đi kèm flexbox.
Cách căn chỉnh các phần tử trong kho chứa flex Một trang tài liệu MDN với các demo tương tác và code mẫu.
Flexbox Cheatsheet của Joni Trythall Một cheatsheet PDF gọn gàng để tải về.
Flexbox Froggy Một trò chơi trực tuyến để tìm hiểu flexbox, với ếch và miếng lily. Nếu bạn muốn chọn căn chỉnh flexbox một cách trực quan, hãy thử trò chơi này (bạn có thể thực hành mọi thứ chúng tôi trình bày trong hướng dẫn này).

Hướng dẫn align-items css - align-items css

Câu chuyện về hai Trục toạ độ

Bắt đầu bằng cách xác định trục chính

1. Left to Right: row

2. Right to Left: row-reverse

3. Top to Bottom: column

4. Bottom to Top: column-reverse

Flex-flow Shorthand

Thuộc tính căn chỉnh Flexbox

Căn chỉnh dọc theo trục chính

Căn dọc theo trục dọc

Căn chỉnh một dòng

Căn chỉnh nhiều dòng

Tóm tắt

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội