There's also a shorthand property, called flex, that we can substitute for using flex-grow, flex-shrink, and flex-basis. Let's swap out flex-basis, flex-grow, and flex-shrink for just flex:
.flex-container { margin-top: 200px; display: flex;}.flex-item { padding: 20px; flex: 1 1 200px;}.flex-item2 { flex-shrink: 0;}
So, the order of the values in flex is as follows: flex-grow, flex-shrink, and flex-basis:
.flex-container { margin-top: 200px; display: flex;}.flex-item { padding: 20px; flex: 1 1 200px; /* order: flex-grow, flex-shrink, flex-basis */}
If we refresh the browser, it will do exactly the same thing it was doing when we used the non-shorthand properties:
For the second flex item, all it has is flex-shrink ...
