[CSS] Hướng dẫn Flexbox layout cho người mới tìm hiểu

Front end • 26/07/2018 • 90 Lượt xem

Flexbox là một kiểu dàn trang (layout mode) 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ị. Các phần tử bên trong có thể tùy chỉnh theo chiều ngang hoặc dọc, kích thước các phần tử con tự đông căn chỉnh để không tràn khung.

Flexbox là một kiểu dàn trang (layout mode) 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ị. Nói theo cách khác, bạn không cần thiết lập kích thước của phần tử, không cần cho nó float, chỉ cần thiết lập nó hiển thị chiều ngang hay chiều dọc, lúc đó các phần tử bên trong có thể hiển thị theo ý muốn.

1.Tạo vùng chứa Flex Container 

Để sử dụng bố cục Flexbox bạn cần thiết lập 1 khung chứa đóng vai trò là Flex Container, như vậy các thẻ con bên trong nó sẽ đóng vai trò là "Flex Items". 

.flex-box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

Hoặc bạn muốn hiển thị inline

.flex-container {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
}

2.Các Thuộc Tính Của Flexbox Container

2.1 Flex-direction

Thuộc tính này quy định cách trình bày các flex-items, bằng cách đặt hướng cho flex-container theo một trục chính. Chúng có thể được trình bày theo hai hướng, giống như hàng ngang hay hàng dọc.

Theo hàng ngang (row), các thẻ con bên trong theo mặc định sẽ được sắp xếp theo một hàng từ trái qua phải.

.flex-container {
  -webkit-flex-direction: row; /* Safari */
  flex-direction:         row;
}

Hoặc ngược lại :

.flex-container {
  -webkit-flex-direction: row-reverse; /* Safari */
  flex-direction:         row-reverse;
}

Tương tự với hàng dọc (column), các mục linh hoạt sẽ được sắp xếp theo một cột từ trên xuống dưới.

.flex-container {
  -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
}

Hoặc theo chiều từ dưới lên trên

.flex-container {
  -webkit-flex-direction: column-reverse; /* Safari */
  flex-direction:         column-reverse;
}

Dưới đây là ví dụ

2.2 Flex-wrap

Ý tưởng ban đầu của flexbox là đặt các Flex items theo một hàng duy nhất. Nhưng sẽ thế nào nếu chúng ta muốn có một bố cục với các mục xếp thành nhiều hàng? Thuộc tính flex-wrap được tạo ra để giúp chúng ta giải quyết điều này.

Flex-wrap: nowrap

Các Flex item được hiển thị trên cùng một hàng, mặc định chúng sẽ tự động dãn hoặc thu hẹp để vừa với chiều rộng của khung lớn.

Flex-wrap: wrap

Các Flex item có thể hiển thị nhiều hàng từ trái qua phải và từ trên xuống dưới nếu cần

Flex-wrap: wrap-reverse

Các Flex item hiển thị theo chiều ngược lại của wrap

Ví dụ về Flex-wrap

2.3 Order

Thuộc tính Order cho phép chúng ta sắp xếp thuộc tính của các flex items

Ví dụ dưới đây chúng ta có 4 flex items được đánh số thứ tự từ 1 đến 4. Chúng ta sẽ sắp xếp thứ tự của chúng theo thứ tự chỉ định

2.4 Flex-grow

Thuộc tính Flex-grow xác định hệ số phát triển của 1 flex items. Nó dựa vào kích thước các items bên trong và lấy phần trống còn lại đắp vào items có thuộc tính flex-grow.

Trong ví dụ dưới đay flex-grow: 2 sẽ lấy phần dư lớn gấp đôi của flex-grow: 1.

2.5 justify-content

Thuộc tính justify-content sắp xếp các mục linh hoạt theo trục chính của dòng hiện tại trong Flex container. Nó giúp bổ sung không gian còn thừa ngay cả khi các Flex items trên một dòng không thể co giãn hoặc đã đạt đến kích thước tối đa.

Mặc định sẽ là: flex-start

Các flex items sẽ được sắp xếp ở phía bên trái của khung.

Flex-end

Các Flex items sẽ được sắp xếp ở phía bên phải của khung

Center

Các Flex items được sắp xếp ở giữa khung

space-between

Các Flex items sẽ được hiển thị với khoảng cách tương đương nhau ở giữa chúng, Items đầu tiên và cuối cùng được xếp vào 2 bên của khung.

space-around

Các Flex items được hiển thị với khoảng cách bằng nhau xung quanh mọi Flex items, kể cả Flex items đầu tiên và cuối cùng

Lời kết

Bài này mình chỉ lấy những thuộc tính thường dùng của Flexbox. Bạn có thể nghiên cứu thêm tại đây

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, Hiện nay đa số các trình duyệt đã hỗ trợ flexbox. Mình thấy Flexbox tiện dụng và có khả năng tùy biến tốt các bạn nên tham khảo.