CSS flex-basis property

Description

CSS flex-basis property behaves the same way as width of a box except it only specifies the width of content-box of flex item.

Syntax

flex-basis : auto | +ve integer

Property values

autoDefault: The width of content-box is resolved to fit the content completely.; flex-basis: auto;
Try it
+ve integer 100: It specifies the width of the content-box of the flex item. Remember that this value does not include border-box and padding area.; flex-basis: 100px;
Try it

Applicable to

It applies to flex items.

Preview

Code

CSS

.parent{
display:flex;
width:250px;	
background-color:rgba(230,230,230,1);
flex-wrap:wrap;
}
.child{
background-color:rgba(150,150,150,1);
color:white; 
border-radius:3px;
padding:6px;
margin-right:2px;
}

HTML

<div class="parent">
<p class="child">#First 1</p>
<p class="child">#Second 2</p>
<p class="child">#Third 3</p>
<p class="child">#Third 4</p>
<p class="child">#Third 5</p>
</div>