Mastering CSS

Using flex-basis

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: