Wednesday, April 18, 2018

flex: 1;

In some of the modern flex CSS stuff this seems to be a setting governing reactivity of a flexible item. There are really three settings herein so I think...

flex: 1;

 
 

...is short for:

flex: 1 1 auto;

 
 

The three values here from left to right are flex-grow, flex-shrink, and flex-basis. The first two define how an element will shrink and grow relative to others in being flexible and last of these, flex-basis, is the length of an item. The length could be in percentage, pixels, or em or it could have an auto or inherit setting.

No comments:

Post a Comment