Làm Layout  Bằng Flexbox và Grid Trong CSS3 (Phần 1)

Làm Layout Bằng Flexbox và Grid Trong CSS3 (Phần 1)

Nếu bạn đã từng viết CSS để sắp xếp vị trí các phần tử trong trang Web, bạn có thể gặp một số vấn đề khó giải quyết, đó là bình thường vì sử dụng CSS để dàn bố cục trang web là một việc không dễ chút nào. Trong rất nhiều trường hợp muốn  tạo bố cục trang Web như mong muốn, chúng ta thường sử dụng các thuộc tính float ở rất nhiều nơi và đặt position: absolute cho những thành phần con nằm trong những thành phần cha có position: relative. Việc này khiến ta phải viết rất nhiều code CSS và kết quả thì khó mà đoán trước được.

Vì thế mà CSS Flexbox và CSS Grid đã ra đời để đáp ứng việc thiết kế dàn bố cục Layout cho Website.

CSS Flexbox và CSS Grid là gì?

  • CSS Flexbox

Flexbox (hộp linh hoạt) là một hệ thống bố cục một chiều (theo chiều ngang hoặc chiều dọc), nhằm mục đích cung cấp một cách hiệu quả việc bố trí, căn chỉnh và phân phối không gian giữa các mục trong một thùng chứa (container), ngay cả khi kích thước của chúng không xác định hoặc kích thước động.

  • CSS Grid

Grid (lưới) là một hệ thống bố cục dựa trên lưới hai chiều với cả chiều dọc và chiều ngang, được sử dụng để định ví các khối trên một grid.

Thuộc tính cơ bản của CSS Flexbox và CSS Grid

1. CSS Flexbox

  • Cung cấp cho container khả năng thay đổi chiều rộng / chiều cao và thứ tự của item để lấp đầy không gian có sẵn (dễ phù hợp với tất cả các loại thiết  bị hiển thị và kích thước màn hình). Một flex container có thể mở rộng hoặc lấp đầy không gian có sẵn hoặc thu nhỏ item để tránh bị tràn.
  • Bố cục Flexbox thích hợp nhất cho ứng dụng quy mô nhỏ.
  • CSS3 giới thiệu hai giá trị mới cho thuộc tính display là flex và inline-flex.

  • display : flex giúp các thành phần chứa trong container trở nên linh hoạt.
  • display : inline-flex giúp các thành phần chứa trong container trở nên linh hoạt nhưng dưới dạng inline.

1.1 Các thuộc tính cho thành phần cha (flex container)

  • flex-direction : xác định hướng của các flex item được đặt trong flex container, theo chiều ngang hoặc chiều dọc.

flex-direction : row | row-reverse | column | column-reverse;

  • flex-wrap : xác định các flex item có bị ép vào một dòng đơn hay không, hay có thể được rớt thành nhiều dòng.

flex-wrap : nowrap | wrap | wrap-reverse;

  • flex-flow : là một shorthand (gộp chung) cho các thuộc tính flex-direction và flex-wrap.

flex-flow : <flex-direction> || <flex-wrap>;

  • justify-content : khi các phần tử trong container không chứa hết trong chiều rộng của container, thuộc tính này sẽ xác định cách sắp xếp các phần tử ở trong container đó.

justify-content : flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;

  • align-items : điều chỉnh vị trí bắt đầu và căn chỉnh các item bên trong container theo dọc, theo trụ cross axis, chiều ngang hoặc chiều dọc phụ thuộc vào flex-direction.

align-items : stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;

  • align-content : căn chỉnh khoảng cách các item bên trong container theo dọc, theo trục cross axis, chiều ngang hoặc chiều dọc tùy thược vào flex-direction. Thuộc tính này chỉ có hiệu lực khi sử dụng flex-wrap với giá trị là wrap vì khi wrap thì các flex item có thể di chuyển mà không bị bó buộc thành 1 hàng (nghĩa là cần phải có nhiều cột hoặc nhiều hàng trong container).

align-content : flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;

* align-content hiển thị tương tự như align-items nhưng thay vì căn chỉnh các flex items thì align-content căn chỉnh theo các đường flex

1.2. Các thuộc tính cho thành phần con (flex item)

  • flex-grow : các phần tử giãn theo độ rộng của container, lấp đầy khoảng trống của container. Nếu các item có flex-grow là 1 thì các container sẽ phân phối đều không gian cho các item, còn nếu có 1 item có flex-grow là 2 thì không gian của item sẽ chiếm gấp đôi so với các item còn lại trong container

flex-grow : <number>;

  • flex-shrink : trái ngược với thuộc tính flex-grow, nó không giãn ra mà lại co lại khi chúng ta thay đổi độ rộng của container

flex-shrink : <number>;

  • flex-basis : xác định độ dài ban đầu của một item

flex-basis : <length> | auto;

  • flex : là một shorthand (gộp chung) cho các thuộc tính flex-grow, flex-shrink và flex-basis

flex : none | [<flex-grow> <flex-shrink> <flex-basis>];

Tạm kết

Trong phần 1 này mình đã chia sẻ cho các bạn kiến thức về CSS Flexbox. Ở phần tiếp theo mĩnh sẽ nói về CSS Grid. Hi vọng mọi người sẽ tiếp tục theo dõi các bài viết của mình nha. Hẹn gặp lại các bạn trong bài tiếp theo.

Cảm ơn mọi người đã xem bài viết của mình !!!

Tài liệu tham khảo:css-tricks.com