Để thiết kế bố cục trang web các người dùng thường sử dụng thuộc tính float hay đặt lồng nhau các position và kỹ thuật clear float cũng được nhiều người sử dụng.
Tuy nhiên ở những phương pháp này cần chú ý vì phải viết khá nhiều code CSS, tuy nhiên kết quả của những phương pháp này thì rất khó đoán trước được, có thể nó sẽ theo ý chúng ta nhưng cũng có thể sẽ bị lỗi. Nhưng một cái mới được ra đời đó là Flexbox Layout nhằm cải thiện những nhược điểm trên.
Với Flexbox người dùng có thể giải quyết rất nhiều vấn đề về dàn trang trong CSS một cách dễ dàng và đơn giản cũng như tiết kiệm thời gian chỉ bằng vài dòng lệnh. Bài viết hôm nay hãy cùng testbed1 tìm hiểu về Flexbox CSS và đặc biệt là Flex Grow.
Flexbox Layout là gì?
Flexbox Layout hay còn được biết đến với tên gọi Flexible Box là một kiểu bố cục trang với khả năng tự cân đối các kích thước đó là tự động thay đổi chiều cao chiều rộng và những phần tử bên trong để có thể phù hợp với các loại thiết bị hiển thị và kích thước màn hình.
Với bố cục thông thường, điều mà các ban cần chú ý đó là thiết lập các kích thước của phần tử, thiết lập các hiển thị cho Float, còn riêng về Flexbox bạn chỉ cần thiết lập phần hiển thị theo chiều ngang hay chiều dục nhằm phù hợp thì các phần tử bên trong có thể hiển thị theo ý muốn của người dùng.
Một điều lưu ý khi sử dụng Flexbox Layout, Flexbox Layout nó phù hợp nhất với mục đích thiết lập những bố cục có quy mô nhỏ và vừa, còn những bố cục với phạm vi lớn hơn thì vẫn nên sử dụng cách thiết lập thông thường đó là dàn trang theo kiểu lưới.
Flex Grow, Flex Shrink, Flex Basis
Flex Grow nó sẽ giúp chúng ta sử dụng khoảng trống còn lại cho một box hoặc độ rộng của div nó sẽ tăng lên số lượng bao nhiêu phần so với phần còn lại của nó. Với trường hợp Flex Grow 0 nếu người sử dụng không set width thì các thông số của item sẽ phụ thuộc vào những giá trị của các phần tử bên trong của nó.
Flox Shrink, từ shink trong tên có nghĩa là co lại, cái nghĩa này cũng tương ứng với nhiệm vụ của nó, nó sẽ co lại khi người sử dụng thay đổi Width của parent xuống. Giá trị của nó là bằng 1, tức là nó sẽ co lại nhưng không nhỏ hơn content nằm trong nó.
Flex Basis nó dùng để chỉnh sửa độ rộng hay các thông số khác cho phần tử. Nó có phần tương tự với Height khi Parent có thuộc tính Flex Direction. Auto là giá trị mặc định của nó.
Flex Grow, Flex Shrink, Flex Basis và Flex sẽ hoạt động như thế nào?
Flex grow với giá trị đầu tiên của nó, nó sẽ chỉ định những phần tử con sẽ được tăng về các kích thước như chiều ngang hay dọc là bao nhiêu sao với những phần tử còn lại, Flex Grow sẽ được đặt mặc định bằng 0, vì theo thường lệ người sử dụng chúng ta sẽ muốn kích thước của phần tử sẻ khớp với nội dung bên trên của phần tử đó.
Nhưng nếu chúng ta thay giá trị mặc định của nó từ 0 thành 1 thì có sử thay đổi rất rõ đó là các phần tử sẽ phát triển và chiếm lượng phần bằng nhau so với phần tử cha. Giá trị của thuộc tính này rất linh động, khi đặt Flex Grow cho tất cả các item với cùng một giá trị thì nó sẽ có những tỉ lệ tương tự nhau và sẽ được dàn đều.
Cú pháp của Flex Grow: item { flex-grow: <number>; /* mặc định là 0 */ }
Flex Shrink nó là giá trị thứ 2 và là trình duyệt có kích thước nhỏ nhất mà điều kiện các phần tử nên có. Nó có giá trị mặc định là 1 có nghĩa là nó sẽ theo nội dung và những phần tử khác nữa.
Tuy nhiên trong trường hợp chúng ta sửa giá trị mặc định thành 0 thì Flex Shrink sẽ hiểu là nó phải giữ nguyên kích thước ban đầu kể cả có vỡ cả layout.
Cú pháp của Flex Shrink: item { flex-Shrink: <number>; /* mặc định là 1 */ }
Thuộc tính cuối cùng đó là Flex Basis, thuộc tính này sẽ quyết định kích thước hoàn hảo của phần tử, mặc định của thuộc tính này là auto. Chúng ta chú ý kích thước của phần tử cha sẽ bằng tổng kích thước của những phần tử con.
Tóm lại 3 giá trị thông số này nó sẽ kết hợp và tác động giúp nhau để có thể tạo nên sự hợp lý trong các phần tử. Do vậy người sử dụng cần chú ý viết chung chúng thành 1 dòng thay vì viết lẻ tẻ từng dòng riêng biệt.
Cú pháp của Flex Basis: item { flex-basis: <length>; /* mặc định là auto */ }
Flex nó dùng để góp chung 3 thuộc tính lại với nhau
Cú pháp của thuộc tính Flex: item { flex: none | [ <’ flex-grow’> <’ flex-shrink’> || <’ flex-basis’> ] }
Kết Luận
Tóm lại qua bài viết trên chúng ta đã cùng nhau tìm hiểu những khái niệm liên quan đến thuộc tính Flex Grow và những thuộc tính khác kết hợp với nó.
Bài viết đã cung cách thông tin về cú pháp cũng như đã cùng chúng ta tìm hiểu khá chi tiết về bản chất của nó. Cảm ơn các bạn đã theo dõi bài viết, hy vong qua bài bài viết bạn có thể vận dụng nó.