CHƯƠNG 1.

FLEXBOX

1.1. Định nghĩa

Flexbox là một kiểu bố cục trang có khả năng tự cân đối kích thước, thay đổi chiều
rộng/chiều cao và thứ tự phần tử bên trong để phù hợp với tất cả các loại thiết bị hiển thị và
kích thước màn hình. Khi đó, không cần thiết lập float, chỉ cần thiết lập hiển thị ngang hay
dọc, lúc đó các phần tử bên trong có thể hiển thị theo ý muốn.
Flexbox thường dùng để thiết lập bố cục ở quy mô nhỏ. Khi thiết lập bố cục ở phạm vi
lớn hơn (như chia cột website) thì nên sử dụng dàn trang theo dạng lưới (grid layout).
1.2. Bố cục Flexbox

Bố cục Flex được thiết lập gồm một khung lớn (parent container) đóng vai trò là
khung linh hoạt (flex containter) và các thẻ con bên trong nó (immediate children) đóng vai
trò các mục nhỏ linh hoạt (flex item).
 container: là thành phần lớn bao quanh các phần tử bên trong, các item bên trong
sẽ hiển thị dựa trên thiết lập của container này.
 item: là phần tử con của container, có thể thiết lập bao nhiêu cột trong một
container, hoặc thiết lập thứ tự hiển thị của nó.
Các item sẽ được bố trí theo trục main axis (bắt đầu từ main-start, kết thúc ở main-
end) hoặc theo trục cross axis (bắt đầu từ cross-start, kết thúc ở cross-end).
 main axis: trục chính để điều khiển hướng mà các item sẽ hiển thị. Lưu ý, main
axis không phải lúc nào cũng nằm ngang như sơ đồ trên, có thể sử dụng thuộc
tính flex-direction để thay đổi hướng của trục và lúc đó các item sẽ hiển thị theo
nó.
 main-start | main-end: các item nằm trong container hiển thị từ điểm bắt đầu gọi
là main-start tới điểm kết thúc gọi là main-end.

Bài giảng Thiết kế web Trang 1

  main size: kích thước (chiều rộng hoặc chiều cao) của các item, tùy thuộc vào
hướng của main axis.
 cross axis: cross axis luôn là trục vuông góc của main axis. Hướng của nó phụ
thuộc vào hướng của main axis.
 cross-start | cross-end: có ý nghĩa tương tự nhưng luôn vuông góc với main start,
main end.
 cross size: kích thước (chiều rộng hoặc chiều cao) của các item dựa trên trục
cross axis, tùy thuộc vào hướng của main axis.
1.3. Các thuộc tính trong Flexbox
1.3.1. Thuộc tính cho thành phần Flex container
ST Tên thuộc tính Công dụng
T
1 display - Định nghĩa một flex container.
- Giá trị: flex | inline-flex
2 flex-direction - Xác định hướng các flex item sẽ được đặt trong flex container.
- Giá trị: row | row-reverse | column | column-reverse

3 flex-wrap - Cho phép các item hiển thị trên 1 hàng hay nhiều hàng.
- Giá trị: nowrap | wrap | wrap-reverse

4 flex-flow - Viết tắt cho 2 thuộc tính flex-direction và  flex-wrap.

- Giá trị: flex-direction flex-wrap;

Bài giảng Thiết kế web Trang 2

 5 justify-content - Đẩy các phần tử trôi về phía nào đó của hướng chính (main axis)
- Giá trị: flex-start | flex-end | center | space-between | space-
around | space-evenly

6 align-items - Điều khiển phần tử con theo hướng vuông góc

(cross axis) với hướng chính.
- Giá trị: flex-start | flex-end | center | stretch | baseline

Bài giảng Thiết kế web Trang 3

 7 align-content - Phân phối khoảng trống giữa các hàng item so với cạnh container
(theo trục cross axis).Chỉ có hiệu lực khi có nhiều hàng hoặc nhiều cột.
- Giá trị: flex-start | flex-end | center | stretch | space-between | space-
around | space-evenly 

Bài giảng Thiết kế web Trang 4

 8 gap - Khoảng cách giữa các hàng và giữa các cột
- Giá trị: số ( gap: column row; )

1.3.2. Thuộc tính cho thành phần Flex item

STT Tên thuộc tính Công dụng
1 order - Qui định thứ tự hiển thị của các flex item.
- Giá trị: số nguyên (mặc định là 0)
(..-2, -1, 0, 1, 2, …)

2 flex-grow - Phần tử này chiếm bao nhiêu phần trong không gian còn lại (trừ đi phần
đã chiếm bởi các phần tử có flex-grow bằng 0) khung chứa theo hướng
chính.
- Giá trị: số (mặc định là 0)
(VD: 1,2,…)

Bài giảng Thiết kế web Trang 5

 3 flex-shrink - Phần tử có thể co lại bao nhiêu phần khi cần thiết
- Giá trị: số (mặc định là 1, không được sử dụng số âm)
4 flex-basis - Gán chiều dài khởi tạo cho phần tử trong hệ thống flex
- Giá trị: số (VD: 100px, …)
5 flex - Viết tắt cho cả 3 thuộc tính flex-grow, flex-shrink, flex-basis
- Giá trị: flex-grow  flex-shrink  flex-basis;
6 align-self - Căn chỉnh một phần tử trong hệ thống flex
- Giá trị: flex-start | flex-end | center | stretch  

1.4. Flex Responsive

Bài giảng Thiết kế web Trang 6