CSS | flex-basis Property
The flex-basis property in CSS is a used to specify the initial size of the flexible item. The flex property is not used if the element is not flexible item.
Syntax:
flex-basis: number|auto|initial|inherit;
Property Values:
Example 1:
<!DOCTYPE html> < html > < head > < style > .Geeks { width: 385px; height: 70px; display: flex; } .Geeks div { flex-grow: 0; flex-shrink: 0; flex-basis: 80px; /* For Safari 6.1 and above browsers */ -webkit-flex-grow: 0; -webkit-flex-shrink: 0; -webkit-flex-basis: 80px; } .Geeks div:nth-of-type(2) { flex-basis: 50%; } .Geeks div:nth-of-type(3) { flex-basis: auto; } .Geeks div:nth-of-type(4) { flex-basis: initial; } .Geeks div:nth-of-type(5) { flex-basis: inherit; } </ style > </ head > < body > < center > < h1 > The flex-basis Property </ h1 > < div class = "Geeks" > < div style = "background-color:green;" > number 80px </ div > < div style = "background-color:lightgreen;" > percentage </ div > < div style = "background-color:green;" > auto </ div > < div style = "background-color:lightgreen;" > initial </ div > < div style = "background-color:green;" > inherit </ div > </ div > </ center > </ body > </ html > |
chevron_right
filter_none
Output:
Example 2:
<!DOCTYPE html> < html > < head > < style > .Geeks { width: 560px; height: 100px; border: 1px solid black; display: flex; } .Geeks div { flex-grow: 0; flex-shrink: 0; flex-basis: 80px; } .Geeks div:nth-of-type(2) { flex-basis: 200px; } .Geeks div:nth-of-type(5) { flex-basis: 120px; } h3{ color:Green; } </ style > </ head > < body > < center > < h1 > The flex-basis Property </ h1 > < div class = "Geeks" > < div style = "background-color:green" > 80px </ div > < div style = "background-color:lightgreen" > GeeksforGeeks < br >200px </ div > < div style = "background-color:green" > 80px </ div > < div style = "background-color:lightgreen" > 80px </ div > < div style = "background-color:green" > 120px </ div > </ div > </ center > </ body > </ html > |
chevron_right
filter_none
Output:
Supported Browsers: The browser supported by flex-basis property are listed below:
- Google Chrome 29.0, 21.0 -webkit-
- Internet Explorer 11.0
- Mozilla Firefox 28.0, 18.0 -moz-
- Safari 9.0, 6.1 -webkit-
- Opera 17.0
Recommended Posts:
- HTML | DOM Style flexBasis Property
- CSS | transition-property Property
- CSS | all Property
- CSS | nav-right property
- CSS | nav-down property
- CSS | nav-up property
- CSS | top Property
- CSS | right Property
- CSS overflow-y Property
- Web API | DOMRect top property
- CSS | clip Property
- CSS | cursor property
- CSS | resize Property
- CSS | perspective Property
- CSS | align-self Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.