Cách Tính Chiều Rộng Của Flex Item

Giả sử có 1 ví dụ sau:  1 flex container có chiều rộng 900px, và các thông số flex-item như hình dưới

Để tính chiều rộng của các flex-item, gồm các bước sau đây:

1. Tìm khoảng trống còn lại:
   vì flex-basic: auto, nên ta có kích thước của mổi flex item khỏi tạo là 183px, ta tính được kích thước của khoảng trống còn lại

   Chiều rộng của flex container là: 900px
   
   Kích thước khởi tạo của các flex item là: (183px + 183px + 183px) = 549px
   
   Như vậy kích thướt khoảng trống còn lại: 900px - 549px = 351px

2. Nếu khoảng trống còn lại là số dương thì tính kích thướt của 1 flex-grow, ngược lại tính tỷ lệ nén của mổi flex-item:
   Trường hợp trên kích thướt khoảng trống còn lại là số dương, nên ta tính kích thướt của 1 flex grow

   Tổng cộng tất cả giá trị của flex-grow : (1 + 1 + 1) = 3
   
   Như vậy của 1 flex grow là: 351px/3 = 117px

    

3. Tìm kích thước của từng flex item:

   Kích thướt của flex item 1 sẽ là: (1 × 117px) + 183px = 300px
   
   Kích thướt của flex item 2 sẽ là: (1 × 117px) + 183px = 300px
   
   Kích thướt của flex item 3 sẽ là: (1 × 117px) + 183px = 300px

    

Trong trườngh hợp kích thướt của khoảng trống còn lại là số âm, ví dụ: xét trường hợp sau

Ở hình trên, ta có các thông số sau: chiều rộng của flex container là auto (hiện tại là 542px), thì cách tính chiều rộng của flex item như sau:

1. Tìm khoảng trống còn lại:

   Chiều rộng flex container là: 542px
   
   Kích thướt khởi tạo của các flex item là: (200px + 183px + 183px) = 566px
   
   Như vậy khoảng cách còn lại khoảng trống là: 542px - 566px = -24px

2. Vì khoảng cách còn lại là số âm, nên ta dựa vào flex shirk để tính tỉ lệ nén của mổi flex item:

   Tổng số tất cả flex item co theo tỷ lệ là: ( (1 × 200) + (1 × 183) + (1 × 183) ) = 566
   
   Hệ số co cho flex item 1 là: (1 × 200) / 566 = 0.35
   
   Hệ số co cho flex item 2 là: (1 × 183) / 566 = 0.32
   
   Hệ số co cho flex item 3 là: (1 × 183) / 566 = 0.32
   

3. Tìm kích thước của từng flex item:

   Flex item 1 sẽ là: (0.35 × -24px) + 200px = 191.52px
   
   Flex item 2 sẽ là: (0.32 × -24px) + 183px = 175.24px
   
   Flex item 3 sẽ là: (0.32 × -24px) + 183px = 175.24px
   

   Ghi chú: Nếu các tính toán này dẫn đến chiều rộng âm, mục đó sẽ được kẹp ở 0 và các phép tính sẽ được thực hiện lại với các mục còn lại và khoảng trống còn lại mới

Nguồn: https://www.madebymike.com.au/demos/flexbox-tester/