Setting a Fixed Width for Items in CSS Flexbox

A flexbox item can be set to a fixed width by setting 3 CSS properties — flex-basis, flex-grow & flex-shrink.

.item {
	flex-basis: 100px;
	flex-grow: 0;
	flex-shrink: 0;
}

• flex-basis : This property specifies the initial length of the flex item.
• flex-grow : This property specifies how much the flex item will grow relative to the rest of the flex items. In this case we don't want the item to grow — so this needs to be set to 0 (this is the default value however).
• flex-shrink : This property specifies how much the flex item will shrink relative to the rest of the items. In this case we don't want the item to shrink — so this needs to be set to 0 (default value is 1).