Căn chỉnh các khối Flex theo trục chéo trong CSS
Bây giờ chúng ta hãy căn chỉnh các khối
theo trục chéo. Căn chỉnh theo trục này
được xác định bởi thuộc tính align-items. Giá trị
flex-start đẩy các phần tử về đầu
trục, và giá trị flex-end - về cuối.
Hãy thử qua các ví dụ.
Ví dụ
Hãy hướng trục chính từ trái sang phải. Trong trường hợp này trục chéo sẽ hướng từ trên xuống dưới. Hãy điều chỉnh vị trí của các khối của chúng ta theo cả trục chính và trục chéo.
Theo trục chính, chúng ta sẽ đẩy các khối về đầu của nó,
tức là về cạnh trái. Để làm điều này, hãy đặt justify-content
thành giá trị flex-start. Theo
trục chéo, chúng ta cũng sẽ đẩy các khối về đầu của nó,
tức là về cạnh trên. Để làm điều này, hãy đặt align-items
thành giá trị flex-start.
Hãy xem chúng ta có được gì:
.parent {
display: flex;
flex-direction: row; /* trục chính sang phải, trục chéo xuống dưới */
justify-content: flex-start; /* các khối về đầu trục chính */
align-items: flex-start; /* các khối về đầu trục chéo */
}
Kết quả thực thi mã:
Ví dụ
Bây giờ hãy đẩy các khối về cuối trục chéo,
tức là về phía dưới. Để làm điều này, hãy đặt align-items
thành giá trị flex-end:
.parent {
display: flex;
flex-direction: row; /* trục chính sang phải, trục chéo xuống dưới */
justify-content: flex-start; /* các khối về đầu trục chính */
align-items: flex-end; /* các khối về cuối trục chéo */
}
Kết quả thực thi mã:
Ví dụ
Bây giờ hãy hướng trục chính từ trên xuống dưới. Vì trục chính là dọc, trục chéo sẽ hướng từ phải sang trái. Hãy đẩy các khối về đầu của cả hai trục:
.parent {
display: flex;
flex-direction: column; /* trục chính xuống dưới, trục chéo sang phải */
justify-content: flex-start; /* các khối về đầu trục chính */
align-items: flex-start; /* các khối về đầu trục chéo */
}
Kết quả thực thi mã:
Ví dụ
Và bây giờ theo trục chéo, chúng ta sẽ đẩy các khối về cuối của nó:
.parent {
display: flex;
flex-direction: column; /* trục chính xuống dưới, trục chéo sang phải */
justify-content: flex-start; /* các khối về đầu trục chính */
align-items: flex-end; /* các khối về cuối trục chéo */
}
Kết quả thực thi mã:
Ví dụ
Hãy đẩy các khối về cuối của cả hai trục:
.parent {
display: flex;
flex-direction: column; /* trục chính xuống dưới, trục chéo sang phải */
justify-content: flex-end; /* các khối về cuối trục chính */
align-items: flex-end; /* các khối về cuối trục chéo */
}
Kết quả thực thi mã:
Ví dụ
Hãy thay đổi hướng của trục chính - hướng nó từ dưới lên trên. Trong khi đó, trục chéo sẽ không thay đổi hướng, bởi vì trục chính vẫn là dọc.
Hãy đẩy các khối về đầu của cả hai trục:
.parent {
display: flex;
flex-direction: column-reverse; /* trục chính lên trên, trục chéo sang phải */
justify-content: flex-start; /* các khối về đầu trục chính */
align-items: flex-start; /* các khối về đầu trục chéo */
}
Kết quả thực thi mã:
