Khi nào sử dụng căn chỉnh trục chính và căn chỉnh trục phụ?
Câu trả lời
Căn chỉnh trục chính (main axis alignment) và căn chỉnh trục phụ (cross axis alignment) là hai khái niệm quan trọng trong CSS Flexbox, một mô hình bố cục được thiết kế để xây dựng giao diện người dùng linh hoạt và hiệu quả. Trục chính (main axis) là trục chính mà các phần tử flex được sắp xếp bên trong một container flex, trong khi trục phụ (cross axis) là trục vuông góc với trục chính bên trong container flex[4].
Khi nào sử dụng căn chỉnh trục chính (main axis alignment):
Khi bạn muốn kiểm soát cách các phần tử flex được sắp xếp dọc theo trục chính của container. Ví dụ, bạn có thể muốn các phần tử được sắp xếp ở giữa, phân tán đều, hoặc căn chỉnh ở đầu hoặc cuối container.
Thuộc tính justify-content được sử dụng để kiểm soát căn chỉnh này, với các giá trị như flex-start, flex-end, center, space-between, space-around, và space-evenly[1][2][3].
Khi nào sử dụng căn chỉnh trục phụ (cross axis alignment):
Khi bạn muốn kiểm soát cách các phần tử flex được sắp xếp hoặc căn chỉnh dọc theo trục phụ của container. Điều này có thể bao gồm căn chỉnh các phần tử ở giữa, căn chỉnh theo đường cơ sở, hoặc kéo dài để lấp đầy chiều cao của container.
