Các thuộc tính trong css và giải thích

Tất Cả Những Điều Cần Biết Về flex Trong CSS

1. Flexbox Là Gì?

Flexbox (Flexible Box Layout) là một mô hình layout trong CSS giúp sắp xếp, căn chỉnh và phân phối không gian giữa các phần tử trong container một cách linh hoạt, ngay cả khi kích thước của chúng không cố định.

2. Cấu Trúc Của Flexbox

Flexbox bao gồm hai thành phần chính:

• Flex container: Phần tử cha có thuộc tính display: flex;

• Flex items: Các phần tử con bên trong flex container.

Ví dụ:

.container {
  display: flex;
}

3. Các Thuộc Tính Quan Trọng Trong Flexbox

3.1. Thuộc Tính Của Flex Container

➡ 3.1.1. flex-direction

Xác định hướng sắp xếp các items:

.container {
  display: flex;
  flex-direction: row; /* row | row-reverse | column | column-reverse */
}

• row (mặc định): Các items xếp theo chiều ngang.

• row-reverse: Ngược lại với row.

• column: Các items xếp theo chiều dọc.

• column-reverse: Ngược lại với column.

➡ 3.1.2. flex-wrap

Xác định có cho phép các items xuống dòng không:

.container {
  flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
}

• nowrap (mặc định): Không xuống dòng.

• wrap: Xuống dòng khi không đủ chỗ.

• wrap-reverse: Xuống dòng nhưng đảo ngược thứ tự.

➡ 3.1.3. justify-content

Căn chỉnh các flex items theo trục chính:

.container {
  justify-content: flex-start; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
}

• flex-start (mặc định): Căn trái.

• flex-end: Căn phải.

• center: Căn giữa.

• space-between: Khoảng cách đều giữa các items.

• space-around: Khoảng cách đều với lề 2 bên.

• space-evenly: Khoảng cách đều nhau.

➡ 3.1.4. align-items

Căn chỉnh theo trục phụ:

.container {
  align-items: stretch; /* stretch | flex-start | flex-end | center | baseline */
}

• stretch (mặc định): Items kéo dài toàn bộ container.

• flex-start: Căn trên.

• flex-end: Căn dưới.

• center: Căn giữa.

• baseline: Căn theo đường cơ sở của chữ.

➡ 3.1.5. align-content

Dùng khi có nhiều dòng flex items:

.container {
  align-content: stretch; /* stretch | flex-start | flex-end | center | space-between | space-around */
}

3.2. Thuộc Tính Của Flex Items

➡ 3.2.1. order

Xác định thứ tự xuất hiện của flex items:

.item {
  order: 2; /* Giá trị mặc định là 0, số nhỏ hơn hiển thị trước */
}

➡ 3.2.2. flex-grow

Xác định mức độ mở rộng khi còn không gian trống:

.item {
  flex-grow: 1; /* Giá trị mặc định là 0 */
}

Nếu tất cả items có flex-grow: 1, chúng sẽ mở rộng đều nhau.

➡ 3.2.3. flex-shrink

Xác định mức độ thu nhỏ khi không gian bị giới hạn:

.item {
  flex-shrink: 1; /* Giá trị mặc định là 1 */
}

Nếu flex-shrink: 0, item sẽ không bị thu nhỏ.

➡ 3.2.4. flex-basis

Xác định kích thước ban đầu của item:

.item {
  flex-basis: 100px; /* Giá trị mặc định là auto */
}

Có thể sử dụng cùng với flex-grow và flex-shrink.

➡ 3.2.5. align-self

Ghi đè align-items trên một item cụ thể:

.item {
  align-self: center; /* auto | flex-start | flex-end | center | baseline | stretch */
}

4. Kết Hợp flex-grow, flex-shrink, flex-basis

Có thể viết gọn ba thuộc tính trên thành flex:

.item {
  flex: 1 1 100px; /* flex-grow flex-shrink flex-basis */
}

Ví dụ:

.item {
  flex: 1; /* Tương đương flex: 1 1 0% */
}

5. Ví Dụ Minh Họa

Ví dụ 1: Căn giữa nội dung

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Ví dụ 2: Chia cột với flex

.container {
  display: flex;
}

.item {
  flex: 1;
  padding: 10px;
  border: 1px solid #000;
}

HTML:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

6. Khi Nào Nên Dùng Flexbox?

• Khi cần căn chỉnh và phân phối không gian linh hoạt.

• Khi làm layout một chiều (hàng hoặc cột).

• Khi cần căn giữa phần tử dễ dàng.

Nếu layout phức tạp nhiều chiều, có thể cân nhắc dùng CSS Grid.

7. Tóm Tắt

✅ display: flex; – Kích hoạt flexbox
✅ flex-direction – Hướng của flex items
✅ justify-content – Căn chỉnh theo trục chính
✅ align-items – Căn chỉnh theo trục phụ
✅ flex-grow, flex-shrink, flex-basis – Điều chỉnh kích thước item

💡 Mẹo:

• Dùng gap để tạo khoảng cách giữa các items thay vì margin.

• Kết hợp flex-wrap và justify-content để làm layout responsive.

📌 Bảng Tổng Hợp CSS Liên Quan Đến Flexbox

🔥 Mẹo Sử Dụng Flexbox Hiệu Quả

• Dùng gap-x-4 và gap-y-4 thay vì margin để dễ quản lý khoảng cách giữa các phần tử.

• flex-1 giúp các items tự động chia đều không gian.

• Kết hợp justify-center items-center để căn giữa nội dung nhanh chóng.