'Difference between flex: 0 0 33% and flex 0 1 33%
What's the difference between those to flex-items properties and which one I should use in order to build a grid system ? For example bootstrap system and ant-design uses flex: 0 0 33 and max-width: 33% (as an example). Why the dont use flex: 0 1 33 for example.
Solution 1:[1]
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 0 0 33%;
The flex-grow CSS property sets the flex grow factor of a flex item's main size.
The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.
The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.
To answer you question, the reason they use that property is to maintain consistence of rows and columns, it means they will have a max with of 33% and will neither shrink nor grow as opposed to yours where you have a flex-shrink of 1. This will cause the item to collapse incase the contents are bigger than the parent element.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Billions.A.Joel |