Breaking News: Grepper is joining You.com. Read the official announcement!

what is the difference between max-width and flex-basis

Osama Eid answered on February 20, 2022 Popularity 7/10 Helpfulness 2/10

answer what is the difference between max-width and flex-basis

what is the difference between max-width and flex-basis

Comment

Here are some of the most important things I have learned about flex-basis during my use of Flexbox’s flex-basis.

Flex-basis controls either “width” or “height” based on the flex-direction
Flex-basis will override any other width: or height: properties if specifically declared anything other than flex-basis: auto (auto by default)
The shorthand for flex basis is (flex: $grow, $shrink, $size) and is set to (flex: 0 1 auto) by default.
When flex basis is set to auto, it first checks for a width or height property (based on direction) if none, it uses the elements content sizing
Flex-basis will still obey any min / max-width: or height settings. Again, it is based on the flex-direction:
Flex-basis in a column overrides height:, this is important because although width: will obey flex-shrink, height: will not. (This can cause confusing and unexpected results in your design.)
Important to note
Notice how auto is bold. By default, if you have a width set and did not declare a flex basis value, width will function normally on that element. There is no difference between how flex-basis: will function on your element and how width: will function on your element. Width will even obey flex-shrink when using Flexbox.

The divergent factor between width and flex-basis is the dynamic ability of flex-basis to change its effective direction based on the flex-direction.

The caveat
height: on the other hand acts a bit differently. The height property does not obey flex-shrink in the same way that width does. When using flex-direction column you should always use flex-basis to dynamically control your Flexbox’s sizing so that you have consistent and expected results.

Also take special note of bullet point number 4:

When flex basis is set to auto, it first checks for a width or height property (based on direction) if none, it uses the elements content sizing

Popularity 7/10 Helpfulness 2/10 Language python

Source: www.freecodecamp.org

Tags: between difference python

Link to this answer
Share Copy Link

Contributed on Feb 20 2022

Osama Eid

0 Answers Avg Quality 2/10

what is the difference between max-width and flex-basis

Contents

More Related Answers

what is the difference between max-width and flex-basis

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.