Flex box CSS là gì? Hướng dẫn CSS Flexible Box đầy đủ nhất

Flex box CSS là module bố cục cho phép bạn sắp xếp, căn chỉnh và phân chia không gian giữa các phần tử trong trang web một cách linh hoạt, dễ dàng tạo layout responsive mà không cần quá nhiều thủ thuật phức tạp. Trong bài viết này, chúng ta sẽ cùng tìm hiểu khái niệm, các thuộc tính quan trọng và cách áp dụng Flex box CSS vào thực tế để xây dựng giao diện hiện đại, tối ưu trải nghiệm người dùng.

Những điểm chính

• Khái niệm CSS Flexbox: Hiểu rõ CSS Flexbox là một mô hình bố cục một chiều, giúp bạn sắp xếp các phần tử theo một trục duy nhất một cách linh hoạt và tối ưu.
• Cấu trúc cơ bản: Nắm được các thành phần cốt lõi như Flex Container, Flex Items và các khái niệm trục/kích thước, giúp bạn hiểu rõ nền tảng và cách hoạt động của Flexbox.
• Các thuộc tính cơ bản của flex container: Nắm vững các thuộc tính quan trọng như display, flex-direction, flex-wrap, justify-content và align-items, giúp bạn điều khiển cách các phần tử con hiển thị và phân bố không gian bên trong.
• Các thuộc tính Flex items thường dùng: Biết được các thuộc tính áp dụng trực tiếp lên flex items như order, flex-grow và align-self, giúp bạn kiểm soát chi tiết từng phần tử con.
• Các trường hợp sử dụng phổ biến: Biết được các ứng dụng phổ biến như căn giữa hoàn hảo, cột có chiều cao bằng nhau và xây dựng menu responsive, giúp bạn hình dung cách Flexbox giải quyết các bài toán layout hiện đại.
• Biết thêm dịch vụ VPS Vietnix giúp triển khai dự án linh hoạt.
  
• Câu hỏi thường gặp: Được giải đáp các thắc mắc về display: flex, các công cụ học tập như Flexbox Froggy và ý nghĩa của các thuộc tính, giúp củng cố kiến thức và làm rõ các vấn đề thực tế.

Flex Box CSS là gì?

CSS Flexbox (Flexible Box Layout) là một mô hình bố cục một chiều trong CSS dùng để phân bổ không gian giữa các phần tử trong một vùng chứa (container) và căn chỉnh chúng một cách hiệu quả.

Với flexbox, bạn có thể dễ dàng bố trí các item lần lượt theo hàng ngang hoặc cột dọc, đồng thời điều chỉnh khoảng cách, thứ tự hiển thị và vị trí của từng item trong container tùy theo nhu cầu thiết kế giao diện. Flexbox đặc biệt mạnh mẽ khi xây dựng các giao diện đáp ứng (responsive), cho phép các phần tử tự động co giãn, lấp đầy khoảng trống hoặc điều chỉnh kích thước ngay cả khi kích thước ban đầu của chúng không xác định.

Bùng Nổ Doanh Thu Với VPS NVMe

Website nhanh hơn – Bán được nhiều hàng hơn

• Chiếm lĩnh TOP Google, hút traffic.
• Mua sắm mượt mà, tăng tỷ lệ chốt đơn.
• Chuyên gia kỹ thuật đồng hành 24/7.

Tăng tốc doanh thu ngay

Cấu trúc cơ bản của Flex Box CSS

Mô hình Flexbox bao gồm hai thành phần chính:

• Flex Container: Phần tử cha bao quanh có thuộc tính display: flex, nơi thiết lập ngữ cảnh định dạng flex.
• Flex Items: Các phần tử con trực tiếp nằm bên trong container.

Bên cạnh đó, bạn cũng nên nắm một số khái niệm trục và kích thước sau:

• main start, main end: Điểm bắt đầu của container theo trục main được gọi là main start, điểm kết thúc theo trục này là main end
• cross start, cross end: Tương tự, cross start và cross end là điểm đầu và cuối của container theo trục cross.
• main axis: Đây là trục chính quyết định hướng sắp xếp của các item, mặc định các phần tử sẽ xếp từ trái sang phải theo trục này.
• cross axis: Là trục vuông góc với main axis, thường hướng từ trên xuống dưới.
• main size: Kích thước của mỗi item được đo dọc theo trục main axis.
• cross size: Kích thước của mỗi item được tính theo trục cross axis.

Khi làm việc với flex container, bạn sẽ thường xuyên sử dụng các thuộc tính sau để điều khiển cách các phần tử con hiển thị và phân bố không gian bên trong: display, flex-direction, flex-wrap, flex-flow, justify-content, align-items và align-content.

Không dùng flexbox

Trước khi kích hoạt Flexbox, pPhần tử .box chỉ là một container thông thường, các phần tử <div> box-item bên trong sẽ xếp chồng lên nhau theo chiều dọc (từ trên xuống dưới), chiếm toàn bộ chiều rộng có sẵn. Còn các phần tử (inline elements) sẽ xếp cùng một dòng nhưng hạn chế về khả năng tùy chỉnh kích thước và khoảng cách.

<!-- Không sử dụng flexbox -->
<div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
</div>

Khai báo display để kích hoạt flexbox

Để bắt đầu sử dụng Flexbox, bạn cần biến phần tử cha .box thành một Flex Container bằng cách đặt thuộc tính display là flex (hoặc inline-flex). Từ thời điểm này, mọi phần tử con trực tiếp sẽ trở thành flex items và tuân theo quy tắc bố cục của flexbox.

/* Kích hoạt flexbox bằng display */
.box {
    display: flex;
}

Thuộc tính flex-direction

flex-direction xác định trục chính và hướng sắp xếp của các flex item trong container. Việc thay đổi giá trị này cũng làm thay đổi thứ tự hiển thị item theo main axis:

• flex-direction: row: Giá trị mặc định, item xếp theo hàng ngang từ trái sang phải.

.box {
    display: flex;
    flex-direction: row;
}

• flex-direction: row-reverse: Các item vẫn xếp ngang nhưng đảo chiều, đi từ phải sang trái.

.box {
    display: flex;
    flex-direction: row-reverse;
}

• flex-direction: column: Trục chính quay dọc, item xếp chồng từ trên xuống dưới.

.box {
    display: flex;
    flex-direction: column;
}

• flex-direction: column-reverse: Item vẫn xếp theo cột nhưng thứ tự đảo ngược, hiển thị từ dưới lên trên.

.box {
    display: flex;
    flex-direction: column-reverse;
}

Thuộc tính flex-wrap

Theo mặc định, Flexbox sẽ cố gắng ép tất cả các item vào một dòng duy nhất. Thuộc tính này kiểm soát việc xuống dòng. Cụ thể flex-wrap quyết định các flex item có được xuống dòng mới khi không đủ chỗ trên một dòng hay không:

• nowrap (mặc định): Tất cả item cố gắng nằm trên một dòng, có thể bị co lại để vừa container.
• wrap: Khi tràn, item sẽ tự động xuống dòng mới để nằm gọn trong container.
• wrap-reverse: Xuống dòng tương tự wrap nhưng theo hướng ngược lại.

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

Thuộc tính flex-flow

flex-flow là dạng viết rút gọn cho flex-direction và flex-wrap. Trong đó, giá trị đầu là hướng sắp xếp, giá trị thứ hai là cách xuống dòng.

.box {
  display: flex;
  flex-flow: row-reverse wrap;
}

Thuộc tính justify-content

justify-content dùng để căn chỉnh vị trí các flex item dọc theo trục chính (main axis) khi còn khoảng trống thừa trong container. Các giá trị thường dùng:

• flex-start: Dồn item về đầu trục chính (giá trị mặc định).
• flex-end: Dồn item về cuối trục chính.
• center: Gom tất cả item vào giữa trục chính.
• space-between: Trải đều khoảng trống giữa các item, item đầu sát mép main start, item cuối sát main end.
• space-around: Mỗi item có khoảng đệm hai bên, mép container có khoảng cách bằng một nửa so với khoảng giữa hai item.
• space-evenly: Chia đều khoảng trống giữa item với item và item với mép container.

/* justify-content: căn theo trục chính */
.box {
  display: flex;
  justify-content: flex-start; /* flex-end, center, space-between, space-around, space-evenly */
}

Thuộc tính align-items

align-items điều khiển cách các flex item được căn chỉnh theo trục phụ (cross axis) trong một dòng flex. Các giá trị phổ biến:

• stretch: Kéo giãn chiều dài item để lấp đầy toàn bộ trục cross (mặc định khi không đặt chiều cao cụ thể).
• flex-start: Căn item về phía đầu trục cross.
• flex-end: Căn item về phía cuối trục cross.
• center: Căn item vào giữa trục cross.
• baseline: Căn theo baseline văn bản bên trong mỗi item.

/* align-items: căn item theo trục cross */
.box {
  height: 300px;
  display: flex;
  align-items: stretch; /* flex-start, flex-end, center, baseline */
}

Thuộc tính align-content

align-content hoạt động tương tự justify-content nhưng áp dụng cho tập các dòng flex và căn theo trục cross. Thuộc tính này chỉ có hiệu lực khi container có nhiều hơn một dòng item (flex-wrap bật). Các giá trị chính: stretch, flex-start, flex-end, center, space-between, space-around, giúp bạn phân bố khoảng trống giữa các dòng item theo chiều cross.

/* align-content: căn các dòng flex theo trục cross */
.box {
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch; /* flex-start, flex-end, center, space-between, space-around */
}

Thuộc tính gap

Thuộc tính gap dùng để tạo khoảng cách giữa các phần tử mà không cần dùng đến margin. Các giá trị chính bao gồm:

• row-gap: Tạo khoảng cách giữa các hàng.
• column-gap: Tạo khoảng cách giữa các cột.
• gap: Tạo khoảng cách cho cả hàng và cột (ví dụ: gap: 10px 20px;).

.box {
  display: flex;
  ...
  gap: 20px;
  gap: 20px 10px; /* row-gap column gap */
  row-gap: 20px;
  column-gap: 10px;
}

Các thuộc tính Flex items thường dùng

Dưới đây là các thuộc tính áp dụng trực tiếp lên các phần tử con nằm bên trong Flex Container:

Các trường hợp sử dụng phổ biến của Flexbox CSS

Flexbox là giải pháp tối ưu cho các bài toán layout hiện đại:

• Căn giữa hoàn hảo: Việc căn giữa nội dung theo cả hai chiều (ngang và dọc) vào chính giữa vùng chứa cha trở nên cực kỳ đơn giản (chỉ cần justify-content: center và align-items: center).
• Cột có chiều cao bằng nhau: Tự động làm cho tất cả các cột trong bố cục nhiều cột có cùng chiều cao, bất kể dung lượng nội dung bên trong khác nhau (nhờ align-items: stretch).
• Xây dựng menu điều hướng responsive: Tạo thanh menu tự động dàn hàng ngang trên máy tính và chuyển thành cột dọc trên điện thoại, hoặc đảo ngược thứ tự logo/menu dễ dàng.
• Phân bổ không gian đồng đều: Dễ dàng chia khoảng cách giữa các phần tử (như các thẻ sản phẩm, icon) bằng cách sử dụng space-between hoặc space-around mà không cần tính toán margin thủ công, lý tưởng cho danh sách sản phẩm hoặc bộ sưu tập ảnh.

Triển khai dự án linh hoạt với máy chủ ảo VPS Vietnix

Khi đã hoàn thiện giao diện bằng Flexbox, bạn sẽ cần nền tảng lưu trữ ổn định để đưa dự án vào hoạt động thực tế. Dịch vụ thuê VPS tại Vietnix mang đến môi trường máy chủ ảo tốc độ cao với 100% ổ cứng SSD/NVMe Enterprise cùng vi xử lý thế hệ mới từ Intel Xeon và AMD EPYC. Khách hàng được cấp toàn quyền quản trị Root Access, dễ dàng mở rộng tài nguyên theo nhu cầu và hoàn toàn yên tâm với tính năng sao lưu tự động miễn phí hàng tuần.

Thông tin liên hệ:

• Website: https://stag.vietnix.dev/
• Hotline: 1800 1093
• Email: sales@vietnix.com.vn
• Địa chỉ: 265 Hồng Lạc, Phường Bảy Hiền, Thành Phố Hồ Chí Minh

Tóm lại, nếu bạn đang tìm một giải pháp gọn nhẹ để xây dựng bố cục hiện đại, linh hoạt và dễ bảo trì thì Flex box CSS là lựa chọn rất đáng ưu tiên trong front-end. Khi hiểu rõ cách hoạt động của flex container và flex item bạn sẽ dễ dàng kiểm soát layout, tối ưu trải nghiệm người dùng trên nhiều thiết bị và rút ngắn thời gian tải trang.