Is it possible to calculate the flexbox flex-basis property?
Something like this
flex-basis: 20%-30px
The flex-basis property defines the size of the flex-item along the main axis of the flex container. The main axis is horizontal if flex-direction is set to row and it'll be vertical if the flex-direction property is set to column .
The flex-direction value can be set to row or column. If its value is row, it defines the width and if its value is column, it defines the height.
If you want to delete flex-basis , you can use width or height instead. When specified on a flex item, the auto keyword retrieves the value of the main size property as the used flex-basis . And the main size property is given by width (in row layouts) or height (in column layouts):
Flex-basis overrules any specified CSS width value, so if you set flex-basis to 0, it doesn't fall back to the CSS "width" value. However, the only way it'll actually be 0px wide is if there's absolutely no content or padding inside it (which would be uncommon in real-world use).
Yes, and you use CSS Calc
Note, there need to be space before/after the minus sign -
.
flex-basis: calc(20% - 30px);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With