Nội dung chính cần nắm
• Khái niệm Flexbox trong CSS: Hiểu rằng Flexbox là mô hình bố cục một chiều, giúp sắp xếp các phần tử theo một trục duy nhất một cách linh hoạt.
• Cấu trúc cơ bản của Flexbox: Nắm được các thành phần như Flex Container, Flex Items cùng các khái niệm về trục và kích thước để hiểu rõ cơ chế hoạt động.
• Những ứng dụng phổ biến của Flexbox: Hiểu các trường hợp sử dụng thực tế như căn giữa nội dung, tạo các cột có chiều cao bằng nhau và xây dựng menu responsive.
Khái niệm Flexbox trong CSS
CSS Flexbox (Flexible Box Layout) là một mô hình bố cục một chiều trong CSS dùng để phân chia không gian và căn chỉnh các phần tử nằm trong một container một cách hiệu quả.
Với Flexbox, bạn có thể dễ dàng sắp xếp các phần tử theo hàng ngang hoặc cột dọc, đồng thời điều chỉnh khoảng cách, thứ tự hiển thị và vị trí của từng phần tử theo nhu cầu thiết kế. Flexbox đặc biệt hữu ích khi xây dựng giao diện responsive, bởi các phần tử có thể tự động co giãn, lấp đầy khoảng trống hoặc thay đổi kích thước ngay cả khi kích thước ban đầu chưa được xác định.
Cấu trúc cơ bản của Flexbox
Mô hình Flexbox bao gồm hai thành phần chính:
• Flex Container: Phần tử cha có thuộc tính display: flex, nơi thiết lập môi trường bố cục Flexbox.
• Flex Items: Các phần tử con trực tiếp nằm bên trong container.
Ngoài ra, bạn cũng nên hiểu một số khái niệm liên quan đến trục và kích thước trong Flexbox:
• main start, main end: Điểm bắt đầu của container theo trục chính gọi là main start, điểm kết thúc là main end.
• cross start, cross end: Tương tự, đây là điểm đầu và điểm cuối theo trục phụ của container.
• main axis: Trục chính quyết định hướng sắp xếp của các phần tử. Theo mặc định, các phần tử sẽ xếp từ trái sang phải theo trục này.
• cross axis: Trục vuông góc với main axis, thường chạy từ trên xuống dưới.
• main size: Kích thước của mỗi phần tử được tính theo trục main axis.
• cross size: Kích thước của mỗi phần tử được tính theo trục cross axis.
Những ứng dụng phổ biến của Flexbox
Flexbox thường được sử dụng để giải quyết nhiều bài toán bố cục phổ biến trong thiết kế web:
• Căn giữa nội dung dễ dàng: Việc căn giữa nội dung theo cả chiều ngang và chiều dọc trong container trở nên rất đơn giản chỉ với justify-content: center và align-items: center.
• Tạo các cột có chiều cao bằng nhau: Flexbox có thể tự động làm cho các cột trong layout nhiều cột có cùng chiều cao, dù nội dung bên trong mỗi cột khác nhau (sử dụng align-items: stretch).
• Xây dựng menu điều hướng responsive: Bạn có thể tạo thanh menu hiển thị theo hàng ngang trên desktop và chuyển thành cột dọc trên thiết bị di động một cách dễ dàng.
• Phân bổ khoảng cách giữa các phần tử: Flexbox cho phép chia đều khoảng cách giữa các phần tử bằng các giá trị như space-between hoặc space-around, rất phù hợp cho danh sách sản phẩm, icon hoặc bộ sưu