Căn chỉnh các phần tử Flex dọc theo trục chính trong CSS
Thuộc tính justify-content cho phép
căn chỉnh các phần tử dọc theo trục chính. Trước đó
bạn đã học các giá trị center,
space-between, space-around,
space-evenly. Bây giờ hãy cùng học
thêm một vài giá trị nữa.
Giá trị flex-start ép các phần tử về đầu
trục chính, còn giá trị flex-end - về cuối.
Hãy xem các ví dụ.
Ví dụ
Hãy hướng trục chính từ trái sang phải, bằng cách đặt
thuộc tính flex-direction là giá trị row.
Ép các khối về đầu trục. Để làm điều này, hãy đặt justify-content
thành giá trị flex-start:
.parent {
display: flex;
flex-direction: row; /* trục chính từ trái sang phải */
justify-content: flex-start; /* các khối về đầu trục chính */
}
Kết quả thực thi mã:
Ví dụ
Bây giờ hãy ép các khối về cuối trục.
Để làm điều này, hãy đặt justify-content
thành giá trị flex-end:
.parent {
display: flex;
flex-direction: row; /* trục chính từ trái sang phải */
justify-content: flex-end; /* các khối về cuối trục chính */
}
Kết quả thực thi mã:
Ví dụ
Bây giờ hãy hướng trục chính từ phải sang trái,
bằng cách đặt thuộc tính flex-direction là giá trị
row-reverse. Ép các khối về đầu
trục, tức là về cạnh phải. Để làm điều này, hãy đặt justify-content
thành giá trị flex-start:
.parent {
display: flex;
flex-direction: row-reverse; /* trục chính từ phải sang trái */
justify-content: flex-start; /* các khối về đầu trục chính */
}
Kết quả thực thi mã:
Ví dụ
Và bây giờ hãy ép các khối về cuối trục chính,
tức là về cạnh trái. Để làm điều này, hãy đặt justify-content
thành giá trị flex-end:
.parent {
display: flex;
flex-direction: row-reverse; /* trục chính từ phải sang trái */
justify-content: flex-end; /* các khối về cuối trục chính */
}
Kết quả thực thi mã:
Ví dụ
Trong các ví dụ trước, trục chính được hướng ngang. Bây giờ hãy lật nó và hướng theo chiều dọc.
Hãy hướng trục chính xuống dưới, bằng cách đặt
thuộc tính flex-direction là giá trị
column.
Ép các khối về đầu trục chính, tức là
về cạnh trên. Để làm điều này, hãy đặt justify-content
thành giá trị flex-start:
.parent {
display: flex;
flex-direction: column; /* trục chính từ trên xuống dưới */
justify-content: flex-start; /* các khối về đầu trục chính */
}
Kết quả thực thi mã:
Ví dụ
Bây giờ hãy ép các khối về cuối trục chính,
tức là về cạnh dưới. Để làm điều này, hãy đặt justify-content
thành giá trị flex-end:
.parent {
display: flex;
flex-direction: column; /* trục chính từ trên xuống dưới */
justify-content: flex-end; /* các khối về cuối trục chính */
}
Kết quả thực thi mã:
Ví dụ
Hãy lật trục chính, hướng nó từ dưới
lên trên. Để làm điều này, hãy đặt thuộc tính flex-direction
là giá trị column-reverse. Trong
trường hợp này, các khối sẽ đổi thứ tự -
đầu trục sẽ là khối cuối cùng trong
mã HTML.
Hãy ép các khối về đầu trục chính,
tức là về cạnh dưới. Để làm điều này, hãy đặt justify-content
thành giá trị flex-start:
.parent {
display: flex;
flex-direction: column-reverse; /* trục chính từ dưới lên trên */
justify-content: flex-start; /* các khối về đầu trục chính */
}
Kết quả thực thi mã:
Ví dụ
Hãy ép các khối về cuối trục chính,
tức là về cạnh trên. Để làm điều này, hãy đặt justify-content
thành giá trị flex-end:
.parent {
display: flex;
flex-direction: column-reverse; /* trục chính từ dưới lên trên */
justify-content: flex-end; /* các khối về cuối trục chính */
}
Kết quả thực thi mã:
