Tổng Quan Về Flexbox Trên Nvue

Flexbox (Flexible Box Layout) là cơ chế định dạng trang chủ được áp dụng trong môi trường nvue của uni-app, đảm bảo khả năng thích ứng linh hoạt cho các thành phần giao diện trước nhiều kích thước màn hình khác nhau. Thay vì dùng vị trí tuyệt đối hay tương đối cứng nhắc, Flexbox cho phép phân bổ không gian theo cách tối ưu nhất.

Trong kiến trúc này, hệ thống bao gồm hai cấp độ chính: Flex Container (chứa các phần tử con) và Flex Items (thành phần con). Mọi phần tử có khả năng chứa nội dung khác trong nvue đều tự động trở thành container mà không cần thiết phải khai báo thủ công `display: flex;`.

Các Thuộc Tính Định Hướng Chính

1. Xác Định Trục Phương Hướng (flex-direction)

Thuộc tính này kiểm soát trục chính để sắp xếp các phần tử con. Mặc định, trục chính theo chiều dọc từ trên xuống dưới.

• column: Sắp xếp theo hàng dọc (mặc định).
• column-reverse: Đảo ngược thứ tự từ dưới lên trên.
• row: Sắp xếp theo hàng ngang từ trái qua phải.
• row-reverse: Đảo ngược thứ tự từ phải qua trái.

2. Kiểm Soát Xuống Dòng (flex-wrap)

Quyết định việc đóng gói nội dung khi vượt quá giới hạn kích thước của container. Giá trị mặc định là không tự động xuống dòng.

• nowrap: Giữ tất cả phần tử trên cùng một dòng, nếu chật sẽ bị cắt bớt hoặc co lại.
• wrap: Tự động chuyển sang dòng mới nếu hết chỗ, bắt đầu dòng tiếp theo phía dưới.
• wrap-reverse: Hành vi giống wrap nhưng dòng tiếp theo sẽ xuất hiện ở phía trên.

3. Căn Chỉnh Theo Trục Chính (justify-content)

Kiểm soát khoảng trống thặng dư còn lại trên trục chính sau khi đã đặt các phần tử con.

• flex-start: Nhóm tất cả vào đầu trục (gần điểm bắt đầu).
• flex-end: Kéo toàn bộ cụm sang cuối trục (cận điểm kết thúc).
• center: Đưa nhóm phần tử nằm giữa container.
• space-between: Phân phối đều đặn: một cái đầu, một cái đuôi, các cái giữa cách đều nhau.
• space-around: Khoảng cách xung quanh mỗi phần tử là bằng nhau.

4. Căn Chỉnh Theo Trục Phụ (align-items)

Xử lý sự căn chỉnh dọc (trục vuông góc với trục chính) của các thành viên trong container.

• stretch: Kéo giãn chiều cao (hoặc rộng) để vừa vặn với container (mặc định).
• flex-start: Canh lề trên.
• flex-end: Canh lề dưới.
• center: Đặt phần tử con ở vị trí trung tâm theo phương ngang.

5. Phân Bổ Không Gian Linh Hoạt (flex)

Thuộc tính này chỉ định tỷ lệ chiếm dụng không gian trống dư thừa của một phần tử. Nó nhận giá trị số (number).

• Nếu các phần tử con đều có flex: 1, chúng sẽ chia đều diện tích còn lại.
• Dùng để tạo bố cục dạng Sidebar cố định và Nội dung tự mở rộng: Cha set display: flex, Sidebar không cần flex, Content set flex: 1.
• Tỷ trọng: Nếu một phần tử là flex: 2 và phần tử kia là flex: 1, phần tử đầu tiên sẽ chiếm gấp đôi diện tích còn lại.

<!-- Ví dụ 1: Danh sách sản phẩm dạng lưới -->
<template>
  <view class="product-container">
    <view v-for="(item, index) in productsList" :key="index" class="grid-item">
      <text>{{ item.name }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      productsList: [
        { name: 'Sản phẩm Alpha' },
        { name: 'Sản phẩm Beta' },
        { name: 'Sản phẩm Gamma' },
        { name: 'Sản phẩm Delta' }
      ]
    }
  }
}
</script>

<style scoped>
.product-container {
  display: flex;          /* Hỗ trợ hiển thị */
  flex-direction: row;    /* Sắp xếp ngang */
  flex-wrap: wrap;        /* Cho phép xuống dòng */
  width: 100%;
}

.grid-item {
  flex: 1;                /* Chiều rộng bằng nhau */
  margin-bottom: 10px;    /* Khoảng cách dưới */
  border: 1px solid #ccc;
  padding: 20px;
  background-color: #f9f9f9;
}
</style>

<!-- Ví dụ 2: Bảng thông tin cân nặng (High Equal Columns) -->
<template>
  <view class="info-card-wrapper">
    <view class="stat-box blue-bg"><text>Người Dùng</text></view>
    <view class="stat-box red-bg"><text>Lượt Xem</text></view>
    <view class="stat-box green-bg"><text>Doanh Thu</text></view>
  </view>
</template>

<script>
// Logic xử lý dữ liệu
export default {
  data() {
    return {
      stats: ['users', 'views', 'revenue']
    }
  }
}
</script>

<style scoped>
.info-card-wrapper {
  width: 80%;
  margin-top: 50px;
  display: flex;
  height: 100px; /* Cố định chiều cao container */
  align-items: stretch; /* Đảm bảo các con bằng nhau chiều cao */
}

.stat-box {
  flex: 1;              /* Chia đều chiều ngang */
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: white;
}

.blue-bg { background-color: #2196F3; }
.red-bg  { background-color: #F44336; }
.green-bg { background-color: #4CAF50; }
</style>