Học cách dàn trang với Flexbox trong CSS

Hoàng Văn Khang

1538

22-06-2020

Khi thiết kế responsive website, flexbox layout là một kiểu dàn trang cực kỳ phổ biến mà bất kỳ web developer nào cũng nên nắm vững. Mặc dù có nhiều cách dàn trang khác nhau như sử dụng thuộc tính float hay các grid framework. Tuy nhiên, flexbox mang lại những giá trị và sự linh hoạt nhất định khiến cho công việc thiết kế website responsive trở nên dễ dàng hơn. Vậy cụ thể Flexbox có ưu điểm gì, sử dụng Flexbox để dàn trang như thế nào? Hãy cùngBizfly Cloud tìm hiểu qua bài viết dưới đây.

Flexbox là gì?

Flexbox (Flexible Box) là một mô-đun CSS cung cấp một cách hiệu quả hơn để bố trí, căn chỉnh các phần tử và khoảng cách giữa chúng trong một container, ngay cả khi kích thước của các phần tử chưa được quy định hoặc linh hoạt. Đó là lí do nó có tên 'flexible box' (linh hoạt). Flexbox thường được sử dụng trong các thiết kế responsive, nó giúp hiển thị các phần tử linh hoạt trên nhiều thiết bị và kích thước màn hình khác nhau.

Nói cách khác, với kiểu dàn trang flexbox, các phần tử bên trong nó sẽ tự động được cân đối kích thước và khoảng cách để hiển thị trên mọi độ phân giải, mọi thiết bị. Điều này có nghĩa là bạn sẽ không cần phải thiết lập kích thước của từng phần tử, cũng không cần thiết lập float cho chúng khi đã sử dụng flexbox.

Ý tưởng chính đằng sau bố cục flexbox là cung cấp cho container khả năng thay đổi chiều rộng và chiều cao của phần tử nằm trong nó để lấp đầy không gian có sẵn. Qua đó nó có thể phù hợp với tất cả các loại thiết bị và kích thước màn hình khác nhau. Một container flex mở rộng các phần tử để lấp đầy không gian trống hoặc thu nhỏ chúng để tránh tràn.

Lưu ý: Bố cục Flexbox phù hợp nhất với các thành phần của ứng dụng và các bố cục quy mô nhỏ như các khung trong trang web. Ngược lại, đối với các layout phạm vi lớn hơn, ví dụ như chia cột cho website, thì ta vẫn nên sử dụng bố cục lưới (grid layout).

Các thành phần trong Flexbox

Vì flexbox là một mô-đun hoàn chỉnh, thay vì chỉ là một thuộc tính duy nhất thì nó bao gồm cả bộ thuộc tính của riêng mình. Một số thuộc tính trong đó để thiết lập phần tử cha sử dụng flex (flex container), một vài thuộc tính khác được sử dụng cho các phần tử con của flexbox (flex items).

Nếu bố cục thông thường dựa trên block và inline direction, thì bố cục flexbox dựa trên các hướng của từng flex container (mà ta có thể tùy chọn). Để hiểu rõ hơn về flexbox, hãy quan sát ví dụ sau:

Các phần tử sẽ được bố trí theo trục chính main axis (kéo dài từ main-start tới main-end) hoặc trục chéo cross axis (từ cross-start đến cross-end).

main axis: Trục chính của flex container, là trục chính dọc theo đó các phần tử flex được xếp ra. Lưu ý, nó không nhất thiết phải nằm ngang; nó phụ thuộc vào thuộc tính flex-direction.

main-start | main-end: Các flex items được đặt trong container bắt đầu từ main-start và đến main-end.

main size: là chiều rộng hoặc chiều cao của một flex item, tùy theo kích thước chính.Thuộc tính main size sẽ có giá trị bằng thuộc tính width hoặc height của item tùy theo chiều của flex-direction là dọc hay ngang.

cross axis: trục vuông góc với trục chính được gọi là trục chéo. Hướng của nó phụ thuộc vào hướng trục chính.

cross-start | cross-end: hai trục này vuông góc với main-start và main-end.

cross size: chiều rộng hoặc chiều cao của phần tử nằm trong flexbox. Thuộc tính này ngược lại so với main size (nếu main size là 'width' thì cross size là 'height' và ngược lại).

Bắt đầu sử dụng Flexbox

Để bắt đầu làm việc với Flexbox. Hãy xem một ví dụ đơn giản:

Dòng lệnh trên sẽ tạo ra 1 container chứa 4 phần tử là các số lần lượt 1, 2, 3, 4.

Để dễ hiểu, hãy thêm màu sắc cho các thành phần:

Với lệnh trên, ta đã thiết lập kích thước và màu sắc cho container và các item. Thu được kết quả như sau:

Bây giờ chúng ta sẽ bắt đầu hiển thị container ở dạng flexbox bằng dòng lệnh CSS sau:

Bạn sẽ thấy các phần tử bên trong sẽ tự hiển thị như hình dưới. Lí do là thuộc tính main axis có giá trị mặc định là chiều ngang.

Nếu bạn muốn các items hiển thị theo chiều dọc thì chỉ việc đổi thuộc tính flex-direction như sau:

flex-direction: column;

Kết quả thu được (lưu ý rằng khoảng cách giữa các phần tử được căn chỉnh đều nhau so với bố cục không sử dụng flex):

Các giá trị của flex-direction:

row: hiển thị flex items theo hàng (chiều ngang);

column: hiển thị flex items theo cột (chiều dọc);

row-reverse: hiển thị theo hàng nhưng đảo ngược vị trí items;

column-reverse: hiển thị theo cột nhưng đảo ngược vị trí items.

Tự điều chỉnh kích thước items

Như đã nói ở trên, ưu điểm của flexbox là nó có thể tự điều chỉnh kích thước của các items trong theo hướng của main axis để items không vượt ra khỏi container. Đây là tính năng mặc định của flexbox mà không cần thiết lập nào cả.

Hãy tìm hiểu với ví dụ trên. Ta hãy tăng chiều rộng của các items xem điều gì sẽ xảy ra nhé:

Như vậy, các item đã tự căn chỉnh chiều rộng mà không bị vượt ra khỏi container (trong trường hợp main axis là chiều ngang).

Flex-wrap

Mặc định thuộc tính flex-wrap sẽ được cài đặt là no-wrap. Tức là tất cả các flex items sẽ được tự điều chỉnh kích thước để lấp đầy một dòng.

Trong trường hợp bạn không muốn chúng bị chèn vào một dòng, hãy thử lệnh sau:

flex-wrap:wrap;

Khi đó, CSS sẽ hiển thị đúng kích thước quy định cho từng item, nếu thiếu không gian thì nó sẽ xuống dòng. Tuy nhiên nếu kích thước item lớn hơn container thì vẫn sẽ bị tự điều chỉnh cho vừa với container.

Thuộc tính flex-wrap có 3 giá trị: no-wrap (mặc định), wrap, và wrap-reverse (đảo ngược vị trí).

Order

Với ví dụ ban đầu, mặc định của HTML sẽ hiển thị lần lượt từng phần tử 1,2,3,4. Flexbox mặc định sẽ hiển thị từ trái sang phải theo chiều ngang (hoặc từ trên xuống dưới theo chiều dọc). Bạn có thể thay đổi thứ tự này như sau:

Flex-grow

Để hiểu về flex grow, ta hãy set chiều rộng của mỗi phần tử về 100px:

Và set flex-grow cho một item bất kỳ, ví dụ:

Như bạn thấy, chiều rộng của item số 2 sẽ chiếm toàn bộ khoảng không gian còn trống (trừ các khoảng cách giữa các item).

Bây giờ, hãy set flex grow cho item 1 là 2 nhé:

Kết quả:

Như vậy, item số 3 và 4 có giá trị mặc định là 100px. Khoảng trống còn lại trong container được chia thành ba phần, item 1 chiếm ⅔ và item 2 chiếm ⅓ của khoảng trống đó.

Flex-shrink

Mặc định, tất cả các phần tử có giá trị flex-shrink là 1. Điều này giúp cho tất cả các items khi co lại đều co theo một tỉ lệ bằng nhau.

Bạn có thể điều chỉnh kích thước của item khi co lại bằng flex-shrink như sau:

Kết quả:

Giá trị shrink càng lớn, item thu nhỏ càng nhiều so với các item khác.

Flex-basis

Lệnh này gán cho item một giá trị nhất định (có thể là giá trị tuyệt đối hoặc tương đối). Giá trị này sẽ không bị ảnh hưởng bởi co giãn. Ví dụ:

Justify-content

Ở trạng thái mặc định, các item nằm trong container sẽ chừa ra một khoảng trống ở đầu và ở cuối container. Nếu bạn sử dụng justify-content, nó sẽ chiếm toàn bộ không gian của chiều ngang hoặc dọc tùy theo main axis.

Thuộc tính justify-content có 5 giá trị được biểu thị như hình bên dưới:

Trên đây chỉ là các thuộc tính thông dụng khi làm việc với Flexbox CSS, để tìm hiểu thêm các thuộc tính khác, bạn tham khảo tại link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Lời kết

Trên đây là các kiến thức cơ bản về flexbox layout mà các web developer cần nắm vững. Nếu bạn có bất kỳ thắc mắc hoặc bổ sung nào, đừng ngần ngại comment để cùng thảo luận nhé.

>> Có thể bạn quan tâm: Dùng CSS để tạo hiệu ứng bắt mắt cho text, tại sao không?