CSS CSS Flexbox Layout Flexbox Properties Smarter Layouts with flex-basis and flex

Michael Pashkov
Michael Pashkov
22,020 Points

Can we do this as a variant? flex: 2 200px;

.item { flex: 1 200px;

}

.item-2 { flex: 2 200px; }

instead of

.item { flex: 1 200px; }

.item-2 { flex-grow: 2; }

Shaun Wong
Shaun Wong
13,506 Points

I don't see why it wouldn't work. Best to test it and see if the results are the same as you were looking for.

The shorthand for two values are Flex grow, and Flex basis.

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

View MDN for the other shorthand properties. https://developer.mozilla.org/en-US/docs/Web/CSS/flex

1 Answer

Michael Pashkov
Michael Pashkov
22,020 Points

Thank you Shaun Wong for your reply. Guil said we should do this way when declaring flex-grow for independent item. After declaring for all items. And I was just queries...

item { flex: 1 200px; } // for all

.item-2 { flex-grow: 2; } // for one as a second declaration replace with .item-2 { flex: 2 200px; }