Flexbox là gì?
Còn gọi: bố cục linh hoạt một chiều, css flexbox, display flex, flex, flex layout
Flexbox là mô hình bố cục trong CSS để sắp xếp các phần tử theo một chiều, hàng ngang hoặc cột dọc, với khả năng căn chỉnh, chia khoảng cách và co giãn linh hoạt theo không gian còn lại.
Hiểu kỹ hơn
Khi khai báo display: flex cho một khối cha, các phần tử con xếp theo trục chính (ngang hoặc dọc). Các thuộc tính thường gặp: justify-content căn theo trục chính (đầu, giữa, cuối, chia đều), align-items căn theo trục phụ, gap tạo khoảng cách giữa các phần tử, flex-wrap cho phép xuống dòng. Với designer dùng Figma, auto layout gần như là flexbox: hướng ngang hoặc dọc, khoảng cách giữa phần tử, padding, căn chỉnh, và tuỳ chọn Hug hoặc Fill tương ứng với cách phần tử co giãn. Hiểu tương quan này giúp thiết kế dễ code đúng. Flexbox hợp cho thanh điều hướng, hàng nút, thẻ có icon và chữ; khi cần lưới cả hàng lẫn cột, CSS Grid thường hợp hơn.
