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

Justin Houghton
Justin Houghton
4,560 Points

Overriding flex-grow values

Does the following code essentially OVERRIDE the flex grow value for item-2 from 1 to 2 or am I misunderstanding what's happening?

The first snippet gives a flex grow value of 1 to all items. The second snippet re-defines the flex-grow value for item 2?

.item {
  flex: 1 200px;

}

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

1 Answer

Ryan McFarlane
Ryan McFarlane
11,463 Points

Yes! This is the 'cascading' part of CSS (Cascading Style Sheets). Regardless of how many rules apply to an element, only the last one is used.