1. Mô hình bố cục Flexbox trong CSS

Trước khi có mô hình bố cục Flexbox, có bốn chế độ bố cục:

  • Block đối với các phần trong một trang web
  • Inline cho văn bản
  • Table cho dữ liệu bảng hai chiều
  • Positioned cho vị trí rõ ràng của một phần tử

Mô hình bố cục hộp Flexbox, giúp thiết kế cấu trúc bố cục linh hoạt đáp ứng dễ dàng hơn mà không cần sử dụng float hoặc positioning

Ví dụ:

2. Flex Container trong CSS

Các thuộc tính trong flex container:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

2.1 Thuộc tính flex-direction trong CSS

Thuộc tính flex-direction xác định hướng mà vùng chứa muốn xếp chồng các mục

Ví dụ:




2.2 Thuộc tính flex-wrap trong CSS

Thuộc tính flex-wrap chỉ định xem các mục sẽ xuống dòng khi thay đổi kích thước màn hình

Ví dụ:

2.3 Thuộc tính flex-flow trong CSS

Thuộc tính flex-flow là một thuộc tính viết tắt để thiết lập cả thuộc tính flex-direction và flex-wrap

Ví dụ:

2.4 Thuộc tính justify-content trong CSS

Thuộc tính justify-content được sử dụng để căn chỉnh vị trí các mục theo chiều ngang bên trong vùng chứa gồm các giá trị sau:

  • center :các mục nằm ở trung tâm vùng chứa
  • flex-start :các mục nằm ở bên trái vùng chứa (mặc định)
  • flex-end :các mục nằm ở bên phải vùng chưa
  • space-around :các mục được căn đều trong vùng chứa
  • space-between : các mục được có khoảng cách cách dều nhau chiếm hết vùng chứa

Ví dụ:

2.5 Thuộc tính align-items trong CSS

Thuộc tính align-items được sử dụng để căn chỉnh vị trí các mục theo chiều dọc bên trong vùng chứa gồm các giá trị sau:

  • center :các mục nằm ở trung tâm vùng chứa
  • flex-start :các mục nằm ở bên trên vùng chứa
  • flex-end :các mục nằm ở bên dưới vùng chưa
  • stretch :các mục lấp đầy vùng chứa (mặc định)
  • baseline :các mục căn chình như căn chỉnh các đường cơ sở của chúng

Ví dụ:

2.6 Thuộc tính align-content trong CSS

Thuộc tính align-content được sử dụng để điều chỉnh hướng xuống dòng của các mục gồm các giá trị sau:

  • center
  • flex-start
  • flex-end
  • space-around
  • space-between
  • stretch

Ví dụ:

2.7 Căn giữa cả trên và dưới

Đặt cả thuộc tính justify-content và thuộc tính align-items  thành center, và mục sẽ được căn giữa cả trên và dưới trong vùng chứa

Ví dụ: