Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flex-basis calculation possible?

Tags:

css

flexbox

Is it possible to calculate the flexbox flex-basis property?

Something like this

flex-basis: 20%-30px

like image 946
javabatz Avatar asked Jul 02 '17 10:07

javabatz


People also ask

How does flex-basis work?

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 .

What property do you need to know in order to determine if the flex-basis is setting the height or the width?

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.

How do I get rid of Flex-basis?

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):

What is Flex-basis 0%?

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).


1 Answers

Yes, and you use CSS Calc

Note, there need to be space before/after the minus sign -.

flex-basis: calc(20% - 30px);
like image 70
Asons Avatar answered Oct 13 '22 22:10

Asons