Flexbox là gì, vì sao nên dùng Flexbox?

Flexbox là một phương pháp bố cục một chiều để sắp xếp các mục theo hàng hoặc cột. Các thuộc tính CSS trong Flexbox rất linh hoạt, sẽ lấp đầy không gian rộng hơn hoặc thu nhỏ để phù hợp với không gian nhỏ hơn. Dưới đây sẽ giải thích tất cả các nguyên tắc cơ bản.

Flexbox làm cho nhiều tác vụ bố cục dễ dàng hơn nhiều, mà các phương pháp float, positioning khó hoặc không làm được.

Mô hình Flexbox

Flexbox áp dụng trong thiết kế website sẽ đem lại kết quả nhanh chóng tuyệt vời. Khi các phần tử được bố trí dưới dạng các mục linh hoạt, chúng được bố trí dọc theo hai trục: main axis và cross axis

flexbox-terms-CSS-html

flexbox-terms-CSS-html

Các thuộc tính CSS trong Flexbox

  • display: flex | inline-flex

flex: dạng khối full thẻ cha, inline-flex: dạng khối chỉ bao đủ nội dung bên trong. Khai báo tại thẻ cha, để áp dụng được các thuộc tính của Flexbox dưới đây:

  • flex-flow (là shorthand của flex-directionflex-wrap), ví dụ flex-flow: row nowrap
  • flex-direction: row | column (khai báo tại thẻ cha, cho biết main axis (row) dòng nằm ngang, hoặc (column) cột nằm dọc).

Mặc định flex-direction: row. Nếu muốn đổi main axis thành chiều dọc/cột, thì phải khai báo flex-direction: column.

flex-direction quyết định trục main axis và cross axis, vì vậy cần để ý thuộc tính này đầu tiên để xác định phương hướng của main axis và cross axit.

  • flex-wrap: nowrap | wrap | wrap-reverse

flex-wrap: nowrap (mặc định khi không khai báo flex-wrap) các khối con bên trong được trình bày theo trục main axis (1 dòng hoặc 1 cột tùy theo flex-direction). Khi không gian trình duyệt nhỏ lại, thì các khối sẽ co theo main axis (1 dòng hoặc 1 cột tùy theo flex-direction) mà không nhảy thêm dòng khác hay cột khác.

flex-wrap: wrap các khối con bên trong được trình bày theo trục main axis (có thể xuống dòng thành nhiều dòng hoặc thêm cột thành nhiều cột, khi không gian trình duyệt nhỏ lại.

flex-wrap: wrap-reverse: các khối con bên trong được trình bày theo trục main axis, có thể nhảy lên dòng, nhảy thêm cột, khi không gian trình duyệt thay đổi nhỏ lại.

  • flex: <number>. Flex là shorthand viết tắt của 3 thuộc tính flex-grow, flex-shrink, flex-basic.

Ví dụ flex: 1, thì flex-grow: 1, flex-shrink: 1, flex-basic: 1px

  • flex-grow: <number>

Number là giá trị số, giúp tăng kích thước main size theo trục main axis. Flex-grow là chỉ số linh hoạt, có tính tỉ lệ với các flex item cùng sử dụng flex. Chỉ định mức độ mà một mục linh hoạt sẽ tăng lên so với phần còn lại của các mục linh hoạt bên trong cùng một vùng chứa.

  • flex-shrink: <number>

Nó ngược lại với flex-grow. Chỉ định mức độ mà một mục linh hoạt sẽ co lại so với phần còn lại của các mục linh hoạt bên trong cùng một vùng chứa.

  • flex-basic: <length> đơn vị độ dài

Khai báo độ dài ban đầu của flex item, tức main size, dựa theo trục main axis. Ví dụ: flex-basic: 20px, tức main size = 20px

  • justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

Căn chỉnh các khối con bên trong theo trục main axis.

  • justify-self: flex-start | flex-end | center

Căn chỉnh chính nó, theo trục main axis. Kết quả tương ứng với việc dùng justify-content trong thẻ cha của nó. Khi đã dùng justify-content khai báo cho thẻ cha, thì không cần dùng justify-self, trừ trường hợp muốn khai báo các phần tử con nào đó một cách khác biệt.

  • align-content: flex-start | flex-end | center

Căn chỉnh các khối con bên trong theo trục cross axis

  • align-self: flex-start | flex-end | center

Căn chỉnh chính thẻ chứa nó, theo trục cross axis. Kết quả tương tự như sử dụng align-content ở thẻ cha của nó.

  • align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit; 

Thuộc tính justify-content căn chỉnh các mục của vùng chứa linh hoạt khi các mục không sử dụng tất cả không gian có sẵn trên trục chính (theo chiều ngang).

  • order: <number> Ví dụ order: 1

Đặt trong thẻ flex item nào thì quyết định thứ tự các flex item đó theo trục main axis. Ví dụ có 3 flex item, flex item nào đặt 1, thì nó đứng thứ nhất; flex item nào đặt 2, thì nó đứng thứ hai; flex item nào đặt 3, thì nó đứng thứ ba tính theo trục main axis.

Xem các thuộc tính Flexbox mô hình qua ví dụ trực quan

https://codepen.io/enxaneta/full/adLPwv/