flex shorthand css

flex can be short handed under the flex property.

For example, flex: 2 0 20px; will set the item to flex-grow: 2;, flex-shrink: 0;, and flex-basis: 20px;.

The following class examples both do the same thing.

CSS

.flex-longhand {
flex-grow: 2;
flex-shrink: 0;
flex-basis: 20px;
}
.flex-shorthand {
flex: 2 0 20px; 
}

Demo

Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹