Tổng quan về Flexbox

1.Mở đầu:

Khi cắt giao diện website đã bao giờ bạn gặp phải các tình huống:

– Bế tắc khi phải căn giữa một đoạn text, một khối content trong một khối khác theo cả chiều ngang và dọc?.

– Sử dụng các trick css để căn giữa nhưng không thể cover hết các màn hình hoặc khi dữ liệu động?

– Quá cực khổ khi thiết kế giao diện responsive mà không dùng thư viện bên thứ 3.

….

Đó là những vấn đề khó giải quyết trước khi có Flexbox, thời kỳ đó có bốn chế độ bố trí element trong layout:

• Block cho các phần trong trang web
• Inline cho văn bản
• Table cho dữ liệu bảng hai chiều
• Position cho vị trí cụ thể của element

Mô-đun Flexbox Layout (Flexible Box) (Theo khuyến nghị của W3C kể từ tháng 10 năm 2017) nhằm mục đích cung cấp một cách bố trí, sắp xếp và phân phối item và không gian hiệu quả hơn trong một container, ngay cả khi kích thước của chúng là động. Flexbox linh hoạt, giúp dễ dàng thiết kế layout responsive mà không cần sử dụng float hoặc position. Flexbox sẽ giải quyết dễ dàng các vấn đề trên.

Flexbox css là gì?

Đây là một module của css3

là mô hình bố cục web mà nó sẽ tự cân đối kích thước của các phần tử bên trong để hiển thị trên mọi thiết bị, tạo các layouts linh hoạt và trực quan.  Flexbox sẽ để các containers tự quyết định cách phân bố đều các items của chính containers – bao gồm kích thước và khoảng cách. Flexbox đã được phát triển hoàn thiện và đang ngày càng được nhiều trang web sử dụng (Bootstrap 4 cũng sử dụng Flexbox để xây dựng hệ thống lưới thay thế cho float ở Bootstrap 3).

Flexbox hứa hẹn sẽ giúp chúng ta thoát khỏi những rắc rối đến từ CSS thuần. Tuy nhiên, để thuần thục model mới này là 1 thách thức không hề dễ dàng.

2.Cấu trúc của flexbox

Trước khi đi vào tìm hiểu kỹ hơn về Flexbox, chúng ta cần tìm hiểu qua về cấu trúc của Flexbox. Dưới đây là sơ đồ cấu trúc của Flexbox:

Một cấu trúc của Flexbox có hai thành phần  là container và item:

• Container là thành phần lớn bao quanh các phần tử bên trong
• Item Các phần tử con của container được gọi là item, ở item bạn có thể thiết lập nó sẽ sử dụng bao nhiêu cột trong một container hoặc thiết lập thứ tự hiển thị của nó.

Ngoài ra cần phải hiểu rõ một số khái niệm sau trong cấu trúc Flexbox:

• Main start và main end: Khi thiết lập Flexbox, điểm bắt đầu của container gọi là main start và điểm kết thúc được gọi là main end. Điều này có nghĩa, các item bên trong sẽ hiển thị từ main start đến main end (hoặc là được phép hiển thị đến main end). Và chiều vuông góc của nó là cross start, cross end cũng có ý nghĩa tương tự nhưng luôn vuông góc với main start, main end.

• main axis: Đây chính là trục chính để điều khiển các Item sẽ được hiển thị như thế nào
• cross axis: Tương tự main axis nhưng là trục vuông góc với main axis
• main size: Đây là kích thước của Item dựa theo trục main axis
• cross size: Là kích thước của Item dựa theo trục cross axis.

3.Flexbox container và thuộc tính của nó

Đây chính là phần tử ngoài cùng, chứa các phần tử con (flex items) bên trong. Tại phần tử này ta cần thiết lập cho nó thuộc tính display: flex; hoặc display: inline-flex;. Và tại đây ta sẽ cấu hình được cách bố trí các flex items thông qua các thuộc tính sau:

• flex-direction: row | row-reverse | column | column-reverse; thiết lập main axis, mặc đính sẽ là row, và đa phần chúng ta sẽ để là row (các flex items nằm trên hàng ngang).
• flex-wrap: nowrap | wrap | wrap-reverse; khi set width cho các flex items thì thuộc tính này quy định các flex item có được xuống dòng hay không khi vượt quá width của container, mặc định sẽ là xuống dòng (nowrap).
• Flex-flow  [flex-direction] [flex-wrap];  đây viết tắt gộp hai thuộc tính ở trên.
• justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right … + safe | unsafe; quy định cách bố trí các flex items theo main axis.
• align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + … safe | unsafe; quy định cách bố trí các flex items theo cross axis.
• align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + … safe | unsafe; quy định cách bố trí các dòng flex items theo cross axis.

4.Flex items và thuộc tính của nó

Khi một element có thẻ cha là một Flexbox container thì thì nó sẽ được coi là một flex item. flex item sẽ có các thuộc tính sau để tùy biến thêm kích thước và vị trí của bản thân trong container:

• flex-grow: number; /* default 0 */ quy định không gian mà item sẽ chiếm trong container.
• flex-shrink: number; /* default 1 */ quy định mức độ co lại của item khi container co lại.
• flex-basis: đơn vị kích thước | auto; /* default auto */ quy định kích thước cho item
• flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] cách viết tắt của 3 thuộc tính trên.
• order: number; /* default is 0 */ quy định vị trí của item trong container.
• align-self: auto | flex-start | flex-end | center | baseline | stretch; quy định cách bố trí của item theo cross axis, thuộc tính này sẽ ghi đè align-items.

5.Lời kết

     Flexbox trong CSS có thể nói là một trong những kiểu dàn trang rất tốt để thay thế cho cách dàn trang thông thường là dùng float, thích hợp khi dàn trang những thành phần nhỏ trong website để hạn chế tối đa việc dùng float không cần thiết.

     Theo khuyến nghị từ Mozilla thì chúng ta sử dụng Flexbox để thiết lập bố cục trong phạm vi nhỏ (ví dụ như những khung trong website) và khi thiết lập bố cục ở phạm vi lớn hơn (như chia cột website) thì hiện nay CSS Grid Layout là hệ thống bố cục mạnh mẽ nhất có sẵn trong CSS (ra đời sau Flexbox). Nó là một hệ thống 2 chiều, có nghĩa là nó có thể xử lý cả cột và hàng, không giống như Flexbox mà phần lớn là một hệ thống 1 chiều.

     Như vậy mình đã giới thiệu với các bạn một cách tổng quan nhất về Flexbox. Có thể nói thì Flexbox cũng dễ sử dụng, tuy nhiên để thuần thục thì cũng cần phải luyện tập nhiều. 

=> Giới thiệu với mọi người một trò chơi thú vị để học flexbox:  https://flexboxfroggy.com/#vi

Bài viết có tham khảo cũng như sử dụng hình ảnh trên https://css-tricks.com