This article describes the difference between the flex-basis and width property along with examples of usage. The flex-basis property defines the initial size of flex-items depending upon the flex-direction value. It has the following additional properties that can change its behaviour:
- The flex-direction value can be set to row or column. If its value is row, it defines the width and if its value is column, it defines the height.
- The flex-basis property can be applied only to flex-items and width property can be applied to all.
- When using flex property, all the three properties of flex-items i.e, flex-row, flex-shrink and flex-basis can be combined into one declaration, but using width, doing the same thing would require multiple lines of code.
- If flex-direction value is set to be column, then for sizing flex-items horizontally width property is used.
The below examples show the differences between flex-basis and the width and height property:
Example 1: Using flex-basis when flex-direction is set to row.
Example 2: Using flex-basis when flex-direction is set to column.
- How to set flexbox having unequal width of elements using CSS ?
- HTML | DOM Style flexBasis Property
- How to set space between the flexbox ?
- Advance CSS layout with flexbox
- Flexbox utilities in bootstrap with examples
- How to align flexbox columns left and right using CSS ?
- How to place content under fixed flexbox navigation bar ?
- How to vertically align text inside a flexbox using CSS?
- How to make flexbox children 100% height of their parent using CSS?
- How to vertically and horizontally align flexbox to center ?
- HTML width/height Attribute vs CSS width/height Property
- What are the differences between npm and npx ?
- Differences between Web Services and Web API
- CSS | max-width Property
- CSS | min-width Property
- CSS | Height and Width
- How to set div width to fit content using CSS ?
- p5.js | width variable
- What are the differences between any vs Object in TypeScript?
- Differences Between Django vs Laravel
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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.