1. Thuộc tính flex-direction

Khi kích hoạt flex cho một phần tử, thì các phần tử con chứa trong nó sẽ được bố trí liên tục theo một hướng được gọi là hướng chính. Hướng chính được thiết lập bằng thuộc tính flex-direction - khi đã có hướng chính thì hướng thứ hai sử dụng đến là hướng vuông góc với hướng chính (từ sau gọi là hướng vuông góc), flex-direction nó nhận các giá trị:

• row (mặc định) : Hướng chính nằm ngang, phần tử sắp xếp từ trái qua phải
• row-reverse: Hướng chính nằm ngang, phần tử sắp xếp từ phải qua trái
• column: Hướng chính thẳng đứng, phần tử xếp từ trên xuống
• column-reverse: Hướng chính thẳng đứng, phần tử xếp từ dưới lên

2. Thuộc tính flex-wrap

Nó nhận các giá trị

• nowrap (mặc định) : Các phần tử cứ xếp theo hướng chính, kể cả vượt ngoài khung container
• wrap: Các phần tử xếp theo hướng chính, nếu vượt qua kích thước khung chứa theo hướng chính sẽ ngắt tạo ra luồng xếp tiếp theo (hàng tiếp theo hoặc cột tiếp theo tùy thuộc đang là hướng chính nào).
• wrap-reverse: Tương tự wrap nhưng hàng (cột) bố trí ngược lại

3. Thuộc tính justify-content

Nó nhận các giá trị để đẩy các phần tử trôi về phía nào đó của hướng chính

• flex-start (mặc định) : đẩy các phần tử con trôi về khu vực bắt đầu hướng chính
• flex-end đẩy các phần tử về khu vực cuối hướng chính
• center đẩy các phần tử vào giữa hướng chính
• space-around không gian thừa theo hướng chính chia đều cho khoảng cách các phần tử
• space-between không gian thừa theo hướng chính chia đều cho khoảng cách các phần tử (phần tử đầu và cuối sát mép khung)

4. Thuộc tính align-items

Nó nhận các giá trị để điều khiển phần tử con theo hướng Vuông góc hướng chính

• stretch (mặc định) : phần tử con mở rộng kích thước tối đa (bằng với chiều cao hàng hoặc chiều rộng cột) của phần tử theo hướng vuông góc hướng chính
• baseline các phần tử con bám theo đường baseline của hàng (cột)
• center phần tử đẩy vào giữa hàng (cột)
• space-around không gian thừa theo hướng chính chia đều cho khoảng cách các phần tử
• space-between không gian thừa theo hướng chính chia đều cho khoảng cách các phần tử (phần tử đầu và cuối sát mép khung)

5. Thuộc tính align-content

Nó điều chỉnh vị trí các hàng (các cột) trong khung, nó nhận các giá trị như stretch, center, flex-end ...

Chỉ có hiệu lực khi có nhiều hàng hoặc nhiều cột.

Thiết lập các phần tử con

Tính năng liên quan đến flex ngoài thiết lập với các thuộc tính từ phần tử chứa (cha - container), còn có thể thiết lập trực tiếp đến từng phần tử con, xem xét các thuộc tính

1. flex-grow
2. flex-shrink
3. flex-basis
4. flex
5. align-self
6. order
   

flex-grow gán các giá trị bằng số, nó cho biết 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.

2. Thuộc tính flex-shrink