Học viên: Phạm Thanh Huấn
Lớp: Web Frontend - React Js 29
Emai: HuanPT99@gmail.com
Link tham khảo: https://yuvrajshrirame.hashnode.dev/css-flexbox-learn-how-to-use-flexbox-in-css

CSS Flexbox: Tìm hiểu cách sử dụng Flexbox trong CSS

  1. Tìm hiểu về Flex Container và Flex Items

  2. Thiết lập một Flex Container

  3. Điều khiển hướng Flex

  4. Quản lý Flex Wrap

  5. Căn chỉnh các Flex Items

    5.1 Căn chỉnh dọc theo trục chính

    5.2 Căn chỉnh dọc theo trục chéo

  6. Điều chỉnh thứ tự của Flex Item

  7. Phân bố không gian với Flexbox

    7.1 Phân bố không gian dọc theo trục chính

    7.2 Phân bố không gian ngang theo trục chéo

  8. Flex Containers lồng nhau

  9. Responsiveness với Flexbox

  10. Kết luận

Giới thiệu:

Trong quá trình phát triển web hiện đại, việc tạo ra các bố cục linh hoạt và đáp ứng yêu cầu để đảm bảo trải nghiệm người dùng liền mạch trên các thiết bị. CSS Flexbox, viết tắt của Flexible Box Layout, cung cấp một cách mạnh mẽ và trực quan để thiết kế các bố cục linh hoạt và năng động. Trong bài viết này, chúng ta sẽ khám phá module Flexbox hoàn chỉnh, bao gồm tất cả các khái niệm chính, thuộc tính và ví dụ thực tế của nó.

1. Tìm hiểu về Flex Container và Flex Items:

Flexbox xoay quanh hai khái niệm chính: flex container và flex items. Flex container là phần tử mẹ chứa một nhóm các flex item. Flex item là các phần tử con của flex container và chúng có thể được sắp xếp theo chiều ngang hoặc chiều dọc.

2. Thiết lập một Flex Container:

Để tạo ra một flex container, chúng ta chỉ cần áp dụng display: flex; cho phần tử container. Thuộc tính này biến container thành một flex container, cho phép các phần tử con của nó trở thành flex items. Ví dụ:

.container {
  display: flex;
}

3. Điều khiển hướng Flex

flex-direction xác định hướng sắp xếp của các flex items bên trong flex container. Nó có bốn giá trị: row, row-reverse, column và column-reverse. Giá trị mặc định là row, sắp xếp các item theo chiều ngang. Dưới đây là một ví dụ về cách thiết lập flex-direction thành row:

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

4. Quản lý Flex Wrap:

Theo mặc định, các flex item được đặt trên một dòng duy nhất trong flex container. Tuy nhiên, nếu container không đủ không gian, các item có thể bị tràn ra.flex-wrap cho phép chúng ta kiểm soát xem các item có nên xuống dòng hay vẫn nằm trên một dòng duy nhất. Nó có hai giá trị: nowrap (mặc định) và wrap. Ví dụ:

.container {
  display: flex;
  flex-wrap: wrap;
}

5. Căn chỉnh các Flex Items

5.1 Căn chỉnh dọc theo trục chính:

justify-content cho phép chúng ta căn chỉnh các flex item theo trục chính (ngang cho row và dọc cho column). Nó điều khiển cách phân phối không gian dư thừa trong container. Các giá trị bao gồm flex-start, flex-end, center, space-between và space-around. Ví dụ:

.container {
  display: flex;
  justify-content: center;
}

5.2 Căn chỉnh dọc theo trục chéo:

align-items điều khiển việc căn chỉnh các flex item theo trục chéo (dọc cho row và ngang cho column). Nó xác định cách các item được định vị trong flex container. Các giá trị bao gồm flex-start, flex-end, center, baseline và stretch. Dưới đây là một ví dụ về căn chỉnh các item vào giữa (center):

.container {
  display: flex;
  align-items: center;
}

6. Điều chỉnh thứ tự của Flex Item

order cho phép chúng ta điều khiển thứ tự hiển thị của các flex item trong flex container. Theo mặc định, tất cả các mặt hàng có giá trị order là 0. Chúng ta có thể gán giá trị dương hoặc âm để sắp xếp lại các item. Ví dụ:

.item {
  order: 1;
}

7. Phân bố không gian với Flexbox:

7.1 Phân bố không gian dọc theo trục chính:

justify-content không chỉ căn chỉnh các mục mà còn giúp phân bố không gian dọc theo trục chính. Các giá trị bổ sung như space-between, space-around và space-evenly tạo ra khoảng cách giữa các item hoặc xung quanh chúng. Ví dụ:

.container {
  display: flex;
  justify-content: space-between;
}

7.2 Phân bố không gian dọc theo trục chéo:

align-content điều khiển phân bố không gian dọc theo trục chéo khi có nhiều dòng của các flex item. Nó xác định cách các dòng được căn chỉnh trong flex container. Các giá trị bao gồm flex-start, flex-end, center, space-between, space-around và stretch. Dưới đây là một ví dụ về việc phân bố không gian giữa các dòng:

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

8. Flex Containers lồng nhau

Các flex container có thể được lồng vào nhau, cho phép tạo ra các bố cục phức tạp và linh hoạt. Kỹ thuật này hữu ích khi bạn cần kiểm soát bố cục của các nhóm cụ thể của các item hoặc tạo cấu trúc theo cấu trúc phân cấp.

9. Responsiveness với Flexbox

Flexbox cung cấp một giải pháp tuyệt vời để xây dựng các bố cục đáp ứng. Bằng cách điều chỉnh các thuộc tính flex và sử dụng media queries, chúng ta có thể tạo ra các thiết kế linh hoạt đáp ứng với các kích thước và hướng màn hình khác nhau.

10. Kết luận:

CSS Flexbox là một module mạnh mẽ giúp đơn giản hóa việc tạo ra các bố cục linh hoạt và đáp ứng. Với các thuộc tính trực quan và tính linh hoạt của nó, nó cung cấp cho nhà phát triển web một bộ công cụ toàn diện để thiết kế giao diện động. Bằng cách nắm vững các khái niệm và thuộc tính được đề cập trong bài viết này, bạn có thể nâng cao khả năng tạo ra các ứng dụng web tuyệt đẹp và thân thiện với người dùng.

Cảm ơn bạn đã quan tâm đến bài đọc này của mình.