


How Does Padding Affect Flex-Shrink Behavior in `border-box` vs. `content-box`?
Dec 10, 2024 am 02:05 AMFlex-shrink Factor in Padding and Border-Box
The flex-shrink factor is used to determine how much an element will shrink when there is negative space in the flex container. When padding is applied to an element, the inner flex basis is affected, depending on the value of box-sizing.
- Content-box: The inner flex basis includes only the content, so padding does not affect the available space for shrinkage.
- Border-box: The inner flex basis includes both content and padding, so padding reduces the available space for shrinkage.
To calculate the scaled flex shrink factor for each item, multiply its inner flex basis by its flex shrink factor. Then, find the ratio of each item's scaled flex shrink factor to the sum of all scaled flex shrink factors. Finally, set the item's target size to its flex basis minus a fraction of the negative space proportional to the ratio.
With no padding, the calculation is straightforward:
Inner Width = Inner Flex Basis + Ratio * Remaining Free Space
With padding, the available space is reduced, so the remaining free space changes.
In the case of border-box, the specified flex bases are the outer bases (including padding). The inner bases are calculated by subtracting padding widths. The sum of the scaled flex shrink factors remains unchanged, but the ratio and target size are adjusted:
Inner Width = (Outer Flex Basis - Padding) + Ratio * Remaining Free Space
Example:
Consider a flex container with three items, each with a flex-shrink factor of 2:
- Item 1: Flex basis = 300px, padding = 0px
- Item 2: Flex basis = 200px, padding = 0px
- Item 3: Flex basis = 100px, padding = 0px
Scenario 1 (No Padding):
- Remaining free space = -200px
- Scaled flex shrink factors: 600, 200, 200
- Sum of scaled flex shrink factors = 1000
- Ratios: 0.6, 0.2, 0.2
- Inner widths: 180px, 160px, 60px
Scenario 2 (Padding = 10px):
- Remaining free space = -260px
- Scaled flex shrink factors: 560, 200, 160
- Sum of scaled flex shrink factors = 920
- Ratios: 0.61, 0.22, 0.17
- Inner widths: 144px, 148px, 48px
Scenario 3 (Border-Box):
- Remaining free space = -200px
- Scaled flex shrink factors: 636, 240, 176
- Sum of scaled flex shrink factors = 1052
- Ratios: 0.6, 0.23, 0.17
- Inner widths: 176px, 160px, 64px
The above is the detailed content of How Does Padding Affect Flex-Shrink Behavior in `border-box` vs. `content-box`?. For more information, please follow other related articles on the PHP Chinese website!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Adding Box Shadows to WordPress Blocks and Elements

Create a JavaScript Contact Form With the Smart Forms Framework

Create an Inline Text Editor With the contentEditable Attribute

Demystifying Screen Readers: Accessible Forms & Best Practices

Making Your First Custom Svelte Transition

Comparing the 5 Best PHP Form Builders (And 3 Free Scripts)

File Upload With Multer in Node.js and Express
