Bố cục Flexbox

Flexbox là một cơ chế bố cục linh hoạt, cho phép kiểm soát cách phân phối không gian, căn chỉnh nội dung và thay đổi thứ tự hiển thị trực quan của các phần tử con. Nhờ đó, việc sắp xếp thành hàng ngang, cột dọc, hoặc thậm chí xuống dòng tự động trở nên đơn giản và hiệu quả.

Một ưu điểm nổi bật của Flexbox là khả năng thích ứng tốt với nhiều kích thước màn hình và thiết bị hiển thị khác nhau.

Flexbox hoạt động dựa trên mối quan hệ cha-con. Khi áp dụng display: flex hoặc display: inline-flex lên một phần tử, phần tử đó trở thành flex container, còn các phần tử con trực tiếp của nó được gọi là flex items. Container sẽ điều khiển cách các item được bố trí trong không gian mà nó chiếm giữ.

<div style="display: flex;">
  <div>Nội dung ngắn.</div>
  <div>Nội dung dài hơn một chút, chưa có thuộc tính nào được đặt rõ ràng.</div>
  <div>Rất nhiều nội dung ở đây — dài hơn hẳn hai phần tử trước, nhưng vẫn chưa có cấu hình cụ thể.</div>
</div>

Trong flex container, các item được sắp xếp theo trục chính (main axis). Trục này có thể là ngang (mặc định) hoặc dọc, cho phép tạo bố cục dạng hàng hoặc cột một cách dễ dàng.

Mô hình hộp (Box Model)

Mỗi phần tử HTML đều được xem như một hộp chữ nhật gồm bốn thành phần: nội dung (content), khoảng đệm (padding), viền (border) và lề ngoài (margin).

Theo mặc định, thuộc tính box-sizing có giá trị là content-box, nghĩa là chiều rộng và chiều cao chỉ áp dụng cho vùng content.

Khi đặt box-sizing: border-box, kích thước khai báo (width/height) sẽ bao gồm cả padding và border, giúp việc tính toán kích thước trực quan và dễ kiểm soát hơn. Lưu ý rằng margin luôn nằm ngoài kích thước này.

Float và Clear

Khi một phần tử được float, nó sẽ thoát khỏi luồng tài liệu thông thường. Các phần tử block phía sau sẽ không dành chỗ cho nó, nhưng nội dung văn bản bên trong những phần tử đó sẽ quấn quanh phần tử nổi.

<style>
.float-img {
  float: left;
  width: 200px;
  height: 150px;
  background: #ddd;
}
.text-content {
  font-family: monospace;
  font-size: 1.2rem;
}
</style>

<div class="float-img"></div>
<div class="text-content">
  a b c d e f g h i j k l m n o p q r s t u v w x y z ...
</div>

Để ngăn hiện tượng quấn quanh, sử dụng thuộc tính clear với các giá trị left, right, hoặc both. Phần tử có clear sẽ được đẩy xuống dưới phần tử nổi tương ứng.

Khối định dạng (Block Formatting Context - BFC)

BFC là một vùng chứa độc lập, nơi các phần tử bên trong tuân theo các quy tắc bố cục riêng, không ảnh hưởng lẫn nhau với phần tử bên ngoài.

Một số điều kiện kích hoạt BFC:

• overflow khác visible (ví dụ: auto, hidden)
• float khác none
• position là absolute hoặc fixed
• display là inline-block, table-cell, v.v.

<style>
.card {
  background: #f0f0f0;
  border: 1px solid #999;
  overflow: hidden; /* Tạo BFC */
}
.avatar {
  float: left;
  width: 80px;
  height: 80px;
  background: #ccc;
}
.info {
  overflow: hidden; /* Tạo BFC để tránh quấn quanh */
}
</style>

<div class="card">
  <div class="avatar"></div>
  <div class="info">
    Thông tin người dùng dài... Thông tin người dùng dài...
  </div>
</div>