Khái niệm
flex-box trong CSS là một công cụ dùng để thiết lập cấu trúc trang web một cách hiệu quả.
flex-box luôn tồn tại một đường cơ sở (mặc định sau khi khai báo là đường nằm ngang), và ta có thể dựa vào đường cơ sở này để có thể vận hành tốt các thuộc tính khác một cách hợp lý.
Flex chỉ dùng để điều khiển các tag con gần nhất
Sau khi khai báo flex cho tag cha, các tag con mặc định sẽ được hiển thị từ trái sang phải và có chiều cao bằng với tag cha
Để vận dung flex-box một cách hiệu quả được, ta cần biết các thuộc tính CSS sau:
justify-content: căn chỉnh theo hướng đường cơ sởalign-item: căn chỉnh theo hướng vuông góc với đường cơ sở
Cách sử dụng - justify-content
flex-start
1
2
3
center
1
2
3
flex-end
1
2
3
space-evenly
1
2
3
space-around
1
2
3
space-between
1
2
3
Cách sử dụng - align-items
flex-start
1
2
3
center
1
2
3
flex-end
1
2
3
On This Page
Khái niệm
Cách sử dụng - justify-content
Cách sử dụng - align-items