Bạn đã biết gì về CSS3 Flexbox ?

4
146

Flexbox Layout hay còn được gọi chính xác là CSS Flexible Box Layout Module là một dạng layout được kế thừa sự tiên tiến của CSS3 giúp cho việc căn chỉnh các item, điều hướng cũng như nơi đặt nó trong một container khi chúng có kích thước động hoặc khi ta không biết chính xác kích thước. Các đặc điểm chính của flex container là khả năng thay đổi chiều rộng hoặc chiều cao của các flex item để lấp đầy không gian có sẵn một cách tốt nhất có thể trên các kích thước màn hình khác nhau.

Nhiều designer và developer đánh giá cách bố trí dạng flex này dễ sử dụng, thiết kế được những dạng layout phức tạp, sử dụng ít code hơn. Thuật toán của Flexbox layout là sự điều hướng, bố trí các item theo chiều dọc(vertical) hoặc chiều ngang(horizontal) nhất định. Để giải thích thêm về cách hoạt động của flexbox, bài viết này tôi sẽ tập trung diễn giải làm thế nào để các thuộc tính flex ảnh hưởng đến layout một cách trực quan nhất.

Các yếu tố cơ bản

Flexbox layout cấu thành từ 2 thành phần chính bao gồm thành phần cha được gọi là flex container và các thành phần con gọi là flex-item được mô tả như hình dưới.

flex-layout

Để biết rõ hơn các bạn có thể tham khảo flexbox model của chuẩn W3C.

Các trình duyệt hỗ trợ:
Chrome 29+
Firefox 28+
Internet Explorer 11+
Opera 17+
Safari 6.1+ (với prefix -webkit-)
Android 4.4+
IOS 7.1+ (với prefix -webkit-)

Bạn cũng có thể xem chi tiết tại đây

Cách sử dụng

Để sử dụng flexbox layout ta chỉ cần set thuộc tính display cho thẻ html bao quanh (thẻ cha):

Hoặc bạn muốn hiển thị nội tuyến trong 1 thuộc tính nào đó, sử dụng như thế này:

Chú ý: Khi bạn set thuộc tính này cho thẻ bao quanh(flex container) thì ngay lập tức các thẻ con sẽ tự động trở thành flex item.

Đó là những cách đơn giản nhất để khai báo một flexbox. Chúng ta sẽ đi sâu vào tìm hiểu từng thuộc tính trong flex container và flex item.

Flexbox container

flex-direction

Thuộc tính này chỉ rõ các flex item được bố trí như thế nào trong flex container. Chúng có thể được sắp xếp theo 2 hướng chính là : row (chiều ngang) và column (chiều dọc).

Với giá trị row, các flex item sẽ được sắp xếp trên 1 hàng từ trái qua phải (left-to-right)

flex-direction-row

Với giá trị row-reverse, các flex item sẽ được sắp xếp trên 1 hàng từ phải qua trái (right-to-left)

flex-direction-row-reverse

Với giá trị column, các flex item được bố trí sắp xếp theo một cột từ trên xuống dưới (top-to-bottom)

flex-direction-column

Với giá trị column-reverse, các flex item được bố trí sắp xếp theo một cột nhưng hướng từ dưới lên trên (bottom-to-top)

flex-direction-column-reverse

Giá trị mặc định: row

flex-wrap

Thuộc tính flex-wrap sẽ điều khiển các flex item nằm trên cùng 1 dòng hoặc nhiều dòng tùy thuộc vào các giá trị dưới đây:

Các flex item được hiển trị trên 1 hàng, theo mặc định thì chúng được co giãn sao cho lấp đầy chiều rộng flex container (hình dưới)

flex-wrap-nowrap

Các flex item được hiển thị trên nhiều hàng theo chiều từ trái qua phải và từ trên xuống dưới (hình dưới)

flex-wrap-wrap

Các flex item cũng được hiển thị trên nhiều hàng nhưng theo chiều từ trái qua phải và từ dưới lên trên (hình dưới)

flex-wrap-wrap-reverse

Giá trị mặc định: nowrap

flex-flow

Thuộc tính này là một cách viết tắt kết hợp 2 thuộc tính flex-directionflex-wrap

Giá trị mặc định: row nowrap

justify-content

Thuộc tính này căn chỉnh các flex item theo trục chính (main axis) của dòng hiện theo flex container. Nó giúp cho việc căn chỉnh không gian giữa các flex item theo các giá trị sau:

Các flex item sẽ được sắp xếp về phía bên trái của flex container(hình dưới)

justify-content-flexstart

Các flex item sẽ được sắp xếp về phía bên phải của flex container(hình dưới)

justify-content-flexend

Các flex item được căn chỉnh ở trung tâm của flex container(hình dưới)

justify-content-center

Với giá trị space-between, các flex item sẽ được hiển thị với khoảng cách giữa chúng là bằng nhau, các flex item đầu và cuối sẽ được sắp xếp sát với cạnh của flex container

justify-content-spacebetween

Các flex item sẽ được hiển thị với khoảng cách bằng nhau xung quanh mỗi item, kể cả flex item đầu và cuối cùng(hình dưới)

justify-content-spacearound

Giá trị mặc định: flex-start

align-items

Các flex item được sắp xếp trên trục đứng theo hàng hiện tại bên trong container, cũng giống như justify-content nhưng theo hướng vuông góc. Thuộc tính này set sự sắp xếp mặc định cho tất cả các flex item.

Các flex item sẽ được kéo dài theo toàn bộ chiều dài của flex container(hình dưới)

align-items-stretch

Các flex item được xếp về phía trên đầu của flex container(hình dưới)

align-items-flexstart

Các flex item cũng được xếp về phía dưới cuối của flex container(hình dưới)

align-items-flexend

Các flex item được xếp sao cho ở giữa flex container(hình dưới)

align-items-center

Các flex item được sắp xếp theo 1 đường cở sở(hình dưới)

align-items-baseline

Giá trị mặc định: stretch

Chú ý: Đọc thêm chi tiết cách tính toán giá trị baseline tại đây

align-content

Thuộc tính align-content giúp căn chỉnh khoảng cách giữa các hàng trong flex container, cũng giống như justify-content nhưng thuộc tính này không căn chỉnh các item riêng lẻ trong 1 trục chính.

Trong đó, giá trị:

  • stretch: Các hàng của flex item được hiển thị với khoảng dưới mỗi dòng của nó
  • flex-start: Các hàng chứa các flex item được xếp khít vào nhau về phần đầu trong flex container
  • flex-end: Các hàng chứa flex item được xếp khít vào nhau về phần cuối trong flex container
  • center: Các hàng chứa flex item được xếp khít vào nhau về phần giữa trang flex container
  • space-between: Các hàng chứa flex item được hiển thị với khoảng cách bằng nhau giữa chúng, chỉ có hàng đầu và hàng cuối là được xếp khít vào flex container
  • space-around: Các hàng chứa flex item được hiển thị với khoảng cách đều nhau xung quanh mỗi hàng.

Giá trị mặc định: stretch
Chú ý: Thuộc tính này chỉ có tác dụng khi flex container có nhiều hơn 1 dòng các flex item.

Flexbox item

order

Thuộc tính order dùng để điều khiển vị trí đặt nhất định của một flex item nào đó trong flex container. Mặc định thì chúng được sắp xếp trước sau theo thứ tự bạn khai báo trong HTML.

Các flex item được sắp xếp lại đơn giản chính xác mà không cần phải chỉnh sửa lại code HTML

flex-item-reorder

Giá trị mặc định: 0

flex-grow

Thuộc tính này chỉ ra sự tăng bao nhiêu kích thước của 1 flex item so với các item còn lại khi khoảng cách giữa chúng đã được xác định. Nếu tất cả các flex item đều có flex-grow lớn hơn 0 và bằng nhau thì chiều rộng của chúng sẽ lấp đầy flex container.

flex-grow

Giá trị mặc định: 0
Chú ý: Số âm là không hợp lệ.

flex-shrink

Ngược lại với flex-grow thì thuộc tính này quy định tỉ lệ co của flex item, con số này sẽ giảm tương đối với phần còn lại của flex item.

flex-shrink

Giá trị mặc định: 1
Chú ý: Số âm không hợp lệ

flex-basis

Thuộc tính này giống với việc set giá trị with và height

flex-basis

Giá trị mặc định: auto

flex

Thuộc tính này là cách viết tắt của flex-grow, flex-shrinkflex-basis. Chúng ta có thể set giá trị đơn giản như auto (1 1 auto) và none (0 0 auto).

Giá trị mặc định: 0 1 auto

align-self

Thuộc tính align-self cho phép căn chỉnh (tương tự align-items cho flex container) bằng việc ghi đè lên riêng một flex item.

align-self

Giá trị mặc định: auto
Chú ý: Giá trị auto sẽ tính toán giá trị align-items trong phần tử cha, hoặc là stretch nếu nó không có cha.

Chú ý cho flex item: các thuộc tính float, clearvertical-align không có tác dụng trong một flex item.

Demo:

See the Pen Flexbox Properties Demonstration by Dimitar (@justd) on CodePen.26877

4 BÌNH LUẬN

ĐỂ LẠI BÌNH LUẬN