- vừa được xem lúc

Bạn đã biết Flex-grow và Flex-shrink hoạt động thế nào chưa???

0 0 40

Người đăng: Duy Nguyễn

Theo Viblo Asia

Trong bài viết này mình sẽ nói về cách tính toán độ rộng của các item. Các ví dụ trong bài viết này sẽ được lấy trong bố cục ngang, nhưng logic sẽ tương tự trong bố cục dọc.

Trước tiên hãy hiểu về flexbox trước. Flexbox là phương pháp bố trí phù hợp nhất cho không gian ở trong các container , giữa các item con, ngay cả khi số lượng và kích cỡ của các item không được biết hoặc thay đổi.

Bây giờ thì đến với việc tính toán độ rộng thôi.

1. Flex-grow

1.1 Sử dụng flex-grow khi nào

Flex-grow sẽ được sử dụng khi tổng kích thước các item trong container của bạn nhỏ hơn kích thước của container và bạn muốn nội dung trong container của mình luôn được lấp đầy.

1.2 Flex-grow sẽ hoạt động thế nào?

Các bạn hãy xem ví dụ sau:

Trong ví dụ trên các bạn thấy:

.container có width=1000px

item1 có flex-basis=200px; flex-grow=3

item2 có flex-basis=400px; flex-grow=5

=>>

Total basis: 600px

Space remaining: 400px

Item 1 grow factor: 3/8 × 400px = 150px

Item 2 grow factor: 5/8 × 400px = 250px

Không gian còn lại là 400px, bằng với chiều rộng của thùng chứa flex (1000px) trừ tổng cơ sở (600px). Trong không gian còn lại (400px), (150px) được phân bổ cho item1 và (250px) cho item2.

Các phân số này được xác định bằng cách lấy giá trị riêng lẻ của flex-grow so với tổng giá trị flex-grow của tất cả các item. Độ rộng cuối cùng của mỗi mục sẽ là tổng của flex-basis + grow factor.

2. Flex-shrink

2.1 Sử dụng flex-shrink khi nào?

Ngược lại so với flex-grow thì flex-shrink sẽ được sử dụng khi tổng kích thước các item trong container lớn hơn kích thước của container và bạn muốn co kích thước của item lại theo tỉ lệ mong muốn.

2.2 Flex-shrink hoạt động như thế nào??

Trước tiên hãy cùng xem ví dụ sau:

.flex-container{ width: 300px; }

.flex-item-1{ flex-basis: 500px; flex-shrink: 2; }

.flex-item-2{ flex-basis: 300px; flex-shrink: 1; }

Total basis: 800px

Space remaining: -500px

Item 1 shrink factor: (2×500) / (1000px + 300px) = 10/13 × -500px = -384.6px

Item 2 shrink factor: (1×300) / (1000px + 300px)= 3/13× -500px = -115.4px

Chiều rộng còn lại là -500px, bằng với độ rộng của flex container(300px) trừ đi tổng chiều rộng cơ sở ( total basis= 800px) . Để tìm ra hệ số co cho mỗi item thì ta làm theo công thức sau:

shrink factor=( flex-shrink value item * flex-basis value)/(Sum( flex-shrink value item * flex-basis value))*space remaining
Độ rộng cuối cùng = flex-basis + shrink factor

Kết luận.

Cảm ơn các bạn đã đọc bài viết của mình. Hẹn gặp các bạn tại các bài viết tiếp theo.

Bài viết tham khảo: https://www.madebymike.com.au/writing/understanding-flexbox/

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 510

- vừa được xem lúc

Cài đặt WSL / WSL2 trên Windows 10 để code như trên Ubuntu

Sau vài ba năm mình chuyển qua code trên Ubuntu thì thật không thể phủ nhận rằng mình đã yêu em nó. Cá nhân mình sử dụng Ubuntu để code web thì thật là tuyệt vời.

0 0 383

- vừa được xem lúc

Đặt tên commit message sao cho "tình nghĩa anh em chắc chắn bền lâu"????

. Lời mở đầu. .

1 1 715

- vừa được xem lúc

Tìm hiểu về Resource Controller trong Laravel

Giới thiệu. Trong laravel, việc sử dụng các route post, get, group để gọi đến 1 action của Controller đã là quá quen đối với các bạn sử dụng framework này.

0 0 343

- vừa được xem lúc

Phân quyền đơn giản với package Laravel permission

Như các bạn đã biết, phân quyền trong một ứng dụng là một phần không thể thiếu trong việc phát triển phần mềm, dù đó là ứng dụng web hay là mobile. Vậy nên, hôm nay mình sẽ giới thiệu một package có thể giúp các bạn phân quyền nhanh và đơn giản trong một website được viết bằng PHP với framework là L

0 0 432

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 423