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

   1 2 3 4 5

   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

   1 2 3

   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

   1 2 3 4 5

   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

   1 2 3 4 5

   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

   1 2 3 4 5 6 7

   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

   1 2 3 4 5

   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/