Let's check out another property for flex items: flex-basis. Note that flex-basis is the initial main size of the flex item, before leftover space is distributed according to the flex factors, which are flex-grow and flex-shrink; we'll talk about the latter shortly. For now, let's think of flex-basis as just a width. So, for flex-item2, let's give it flex-basis of 400px and remove its flex-grow factor:
/***************Flexbox demo***************/.flex-container { margin-top: 200px; display: flex;}.flex-item { padding: 20px; flex-grow: 1;}.flex-item2 { flex-basis: 400px;}
If you refresh the browser, it will size the second flex item to 400px. But if we really look at this, it's sizing it to a little more than 400 pixels:
