Nhiều ứng viên dùng flexbox/grid hàng ngày nhưng chỉ theo thói quen thử-sai, không hiểu cơ chế thật — nhà tuyển dụng dùng câu hỏi tưởng chừng đơn giản để phát hiện điều này ngay.
justify-content và align-items?" — justify-content căn theo main axis (trục chính, mặc định là ngang nếu flex-direction: row), align-items căn theo cross axis (trục phụ, vuông góc với trục chính). Nhiều người trả lời sai vì không nhớ trục thay đổi theo flex-direction.flex: 1 nghĩa là gì?" — Đây là shorthand của flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Hiểu rõ 3 giá trị riêng lẻ mới trả lời chính xác được — nhiều ứng viên chỉ biết "cho item giãn ra" mà không giải thích được cơ chế.flex-shrink: 1?" — Thường do nội dung bên trong (text dài không wrap, ảnh không set max-width) chặn item co — cần thêm min-width: 0 hoặc overflow: hidden."Khi nào dùng Grid thay vì Flexbox?" — Flexbox là 1 chiều (row HOẶC column), Grid là 2 chiều (row VÀ column cùng lúc) — dùng Grid khi cần layout dạng bảng/lưới thật sự (dashboard, gallery ảnh), dùng Flexbox cho layout theo 1 hướng (navbar, danh sách item xếp hàng).
"fr unit là gì?" — Fractional unit, chia không gian còn lại theo tỷ lệ — grid-template-columns: 1fr 2fr nghĩa là cột 2 rộng gấp đôi cột 1, sau khi trừ phần cố định (nếu có).
"Mobile-first vs Desktop-first khác nhau thế nào?" — Mobile-first viết CSS mặc định cho mobile, dùng min-width media query để mở rộng dần lên desktop — cách này thường cho CSS gọn hơn vì mobile thường đơn giản hơn desktop. Desktop-first làm ngược lại, dùng max-width.
"rem vs em vs px khi nào dùng cái nào?" — rem tính theo font-size của html (nhất quán toàn trang, tốt cho spacing/font-size tổng thể), em tính theo font-size của phần tử cha gần nhất (có thể compound khi lồng nhau, dùng tốt cho spacing tương đối trong 1 component), px cố định tuyệt đối (ít linh hoạt với accessibility zoom).
Khi được hỏi bất kỳ câu CSS nào, đừng chỉ trả lời "nó hoạt động thế này" — hãy thêm 1 câu về lý do thiết kế hoặc trường hợp dùng thực tế. Điều này thể hiện bạn hiểu bản chất, không học thuộc.