Bố cục (Layout)
1 tuần Sơ cấpSắp xếp các phần tử theo hàng, cột hoặc lưới.
Tổng quan
Dùng Flexbox và Grid để dàn trang.
Giao diện đẹp cần bố cục chuẩn.
- Flexbox
- Grid
- Responsive
Chi tiết
Flexbox
Dùng display: flex để sắp xếp các phần tử theo một chiều (hàng hoặc cột). Dễ dàng căn giữa hoặc điều khiển việc xuống dòng (flex-wrap).
- display: flex;
- justify-content: center;
- flex-wrap: wrap;
- Dùng gap để tạo khoảng cách giữa các mục
- Gán display: flex cho phần tử con thay vì phần tử cha
Grid
Dùng display: grid để tạo bố cục lưới 2 chiều. Rất tiện cho các danh sách thẻ (card) phức tạp.
- grid-template-columns: repeat(3, 1fr);
- gap: 16px;
- Dùng Flex cho 1 chiều, Grid cho 2 chiều
Responsive Design (Media Query)
Thay đổi CSS tùy theo độ rộng màn hình. Cần thiết để giao diện đẹp trên cả điện thoại và máy tính.
- @media (min-width: 768px) {\n .container { display: flex; }\n}
- Thiết kế cho mobile trước rồi mới ghi đè cho PC (Mobile First)
Các bước thực hành
- 1 Xếp hàng bằng Flexbox 3 phút
Bố cục cơ bản nhất, xếp các phần tử nằm ngang.
- Tạo div cha với class container
- Thêm 3 phần tử con
- Gán display: flex; cho container
<style>\n.container { display: flex; gap: 10px; }\n.item { padding: 20px; background: #eee; }\n</style>\n<div class="container">\n <div class="item">1</div>\n <div class="item">2</div>\n <div class="item">3</div>\n</div> - 2 Chia hai đầu (Header phong cách) 3 phút
Logo bên trái, Menu bên phải.
- Dùng justify-content: space-between;
<style>\n.header { display: flex; justify-content: space-between; align-items: center; }\n</style> - 3 Lưới thẻ Responsive bằng Grid 5 phút
Tự động đổi số cột tùy theo chiều rộng màn hình.
- Dùng grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
<style>\n.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }\n</style>
Vị trí nghề nghiệp & thực tế
Flexbox/Grid bắt buộc cho UI responsive trên JD.
Ví dụ trong ngành
- Sidebar admin
- Lưới sản phẩm
- Menu mobile
Kế hoạch học đề xuất
Flex hàng → căn giữa → grid 3 cột → media query → card UI.
Kiến thức nền
Flexbox/Grid bắt buộc cho UI responsive trên JD.…
Câu hỏi thường gặp
- Nên dùng Flexbox hay Grid?
- Dàn hàng/cột đơn giản thì Flexbox, chia ô bàn cờ phức tạp thì Grid. Header/Footer thường dùng Flex, danh sách sản phẩm dùng Grid.
- Tại sao văn bản quá dài làm Flexbox bị vỡ?
- Flexbox mặc định không muốn co lại. Hãy thử dùng min-width: 0; cho phần tử con để nó chịu xuống dòng.
- Dùng float: left; còn tốt không?
- Đã quá cũ! Hãy dùng Flexbox cho mọi nhu cầu dàn trang hiện đại.
- Flex vs Grid?
- Flex một trục; Grid bố cục 2 chiều.
- Cần Bootstrap?
- Không bắt buộc—Flex/Grid đủ UI production.
① Đã đọc giải thích. Tiếp theo ② Làm bài tập.
Đã hiểu về Layout.
Học về Form và Validation.