Trục chính và trục phụ trong khối flex trong CSS

Về flexbox có thể nói theo hai thuật ngữ: thứ nhất là - hàng hoặc cột, thứ hai - theo thuật ngữ trục. Chúng ta đã tìm hiểu về hàng và cột, bây giờ hãy cùng tìm hiểu về các trục. Hiểu về các trục là cần thiết để căn chỉnh các phần tử theo chiều ngang hoặc theo chiều dọc.

Khi làm việc với các phần tử flex, luôn tồn tại một trục chính và một trục phụ. Chúng ta có thể căn chỉnh các phần tử dọc theo trục chính và vuông góc với trục chính. Trục chính có thể có 4 hướng: từ trái sang phải, từ phải sang trái, từ trên xuống dưới và từ dưới lên trên.

Hướng của trục phụ phụ thuộc vào hướng của trục chính: nếu trục chính nằm ngang, thì trục phụ hướng từ trên xuống dưới, nếu trục chính thẳng đứng, thì trục phụ hướng từ trái sang phải. Trục phụ không thể có các hướng khác.

Hướng của trục chính được điều chỉnh bởi thuộc tính flex-direction. Nếu thuộc tính này có giá trị row - trục chính hướng từ trái sang phải, nếu giá trị là row-reverse, thì từ phải sang trái. Giá trị column hướng trục từ trên xuống dưới, và giá trị column-reverse - từ dưới lên trên.