CSS là ghi tắt của Cascading Style Sheets. Nó là một ngôn ngữ được sử dụng để mô tả cách các phần tử HTML được hiển thị trên màn hình.

Cascading (dịch: xếp tầng) là quá trình mà các thuộc tính CSS được áp dụng cho các phần tử HTML. Nó xác định kiểu nào sẽ được ưu tiên cho element khi có nhiều quy tắc xung đột.

See the Pen cascade example by Đạt Tạ (@pvotfthe-the-reactor) on CodePen.

Position là thuộc tính CSS được sử dụng để xác định vị trí của một phần tử trong trang web.

Có 5 giá trị của position:

• static (default): Hiển thị theo thứ tự.
• relative: Vị trí tương đối so với vị trí ban đầu của element.
• absolute: Vị trí tương đối so với element có position: relative cha gần nhất, nếu không có thì lấy phần tử root html làm cha.
• fixed: Vị trí tương đối so với viewport, cố định khi scroll.
• sticky: Sự kết hợp giữa absolute và fixed. Cố định theo cha gần nhất.

Khi giá trị position khác static, ta sẽ gán giá trị cho các thuộc tính top, right, bottom, left sẽ được sử dụng để xác định vị trí của element.

Là một mô hình bố cục trong CSS được thiết kế để giúp việc sắp xếp và căn chỉnh các phần tử trong một container trở nên dễ dàng và linh hoạt hơn. Flexbox cho phép tạo ra các bố cục phức tạp mà không cần phải sử dụng các thuộc tính float hay positioning truyền thống.

Flex direction

Xác định hướng các phần tử con trong container.

Có 4 giá trị:

• row: Từ trái sang phải.
• row-reverse: Từ phải sang trái.
• column: Từ trên xuống dưới.
• column-reverse: Từ dưới lên trên.

Justify content

Căn chỉnh flex items theo main axis.

Có 6 giá trị:

• flex-start: Căn main start.
• flex-end: Căn main end.
• center: Căn giữa main axis.
• space-between: Căn đều các flex items.
• space-around: Căn đều các flex items. Khoảng cách ở đầu và cuối bằng 1/2 khoảng cách giữa các flex items.
• space-evenly: Căn đều các flex items. Khoảng cách ở đầu và cuối bằng khoảng cách giữa các flex items.

Align items

Căn chỉnh flex items theo cross axis.

Có 5 giá trị:

• stretch: Kéo dài các phần tử con để chiếm toàn bộ chiều cao của container.
• flex-start: Điểm bắt đầu ở cross start.
• flex-end: Điểm kết thúc ở cross end.
• center: Nằm giữa cross start và cross end.
• baseline: Nằm trên đường cơ sở của văn bản.

Align content

align-content tương tự justify-content nhưng căn theo trục cross axis.

Có 5 giá trị:

• stretch
• flex-start
• flex-end
• center
• space-around
• space-evenly