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.
Giả sử trục chính nằm ngang. Trục phụ sẽ hướng về đâu?
Giả sử trục chính thẳng đứng. Trục phụ sẽ hướng về đâu?
Giả sử trục phụ hướng sang phải. Trong trường hợp này, trục chính có thể hướng về đâu?
Giả sử trục phụ hướng xuống dưới. Trong trường hợp này, trục chính có thể hướng về đâu?
Trục phụ có thể hướng từ phải sang trái không?
Trục phụ có thể hướng từ dưới lên trên không?
Giả sử thuộc tính flex-direction có
giá trị row. Trục chính sẽ hướng về đâu?
Trục phụ sẽ hướng về đâu?
Giả sử thuộc tính flex-direction có
giá trị column. Trục chính sẽ hướng về đâu?
Trục phụ sẽ hướng về đâu?
Giả sử thuộc tính flex-direction có
giá trị row-reverse. Trục chính sẽ hướng về đâu?
Trục phụ sẽ hướng về đâu?
Giả sử thuộc tính flex-direction có
giá trị column-reverse. Trục chính sẽ
hướng về đâu? Trục phụ sẽ hướng về đâu?