flex-basis
Specifies the base size of a flex item — the size used as the starting point before any growing or shrinking with 'flex-grow' or 'flex-shrink'.
Sample Code
/* Auto size based on content (initial value) */
.item { flex-basis: auto;}
/* Fixed width */
.item-fixed { flex-basis: 200px;}
/* Specified as percentage */
.item-percent { flex-basis: 33.333%;}
/* Base size of 0 (for equal distribution with flex-grow) */
.item-zero { flex-basis: 0;}
Available Values
| Value | Description |
|---|---|
| auto | Uses the item's 'width' (or 'height') value. If not set, the size is based on content. This is the initial value. |
| <length> | Specified using length values such as px, em, rem, etc. |
| <percentage> | Specified as a percentage of the container's main axis size. |
| 0 | Sets the base size to 0. Used when distributing free space equally with 'flex-grow'. |
| content | Sizes the item based on its content. |
Specification
| Item | Details |
|---|---|
| Initial value | auto |
| Applies to | Flex items |
| Inherited | No |
| Animation | Yes (interpolated as length/percentage; not animatable to/from 'auto') |
Browser Compatibility
Chrome29+ ○
28 △27 △26 △25 △24 △23 △22 △21 or earlier ×
Firefox22+ ○
21 or earlier ×
Safari9+ ○8 △
7 △6 or earlier ×
Edge12+ ○
IE11 ○10 ×9 ×
8 ×7 ×
6 ×
Opera12.1+ ○
11 or earlier ×
iOS Safari9+ ○8 △7 △6 or earlier ×
Android Browser4.4+ ○3 or earlier × Chrome AndroidLatest ○ Firefox AndroidLatest ○Overview
'flex-basis' is a property applied to flex items that specifies the base size before any growing or shrinking with 'flex-grow' or 'flex-shrink'. When 'flex-direction: row', it corresponds to width; when 'column', it corresponds to height.
Difference Between 'flex-basis' and 'width'
Both 'flex-basis' and 'width' (or 'height') can be set on a flex item, but 'flex-basis' takes precedence (except when 'auto').
| Setting | Result |
|---|---|
| flex-basis: auto; width: 200px; | Uses the width value of 200px. |
| flex-basis: 300px; width: 200px; | Uses flex-basis value of 300px. |
| flex-basis: 0; width: 200px; | Uses flex-basis value of 0. |
For sizing flex items, it is better to use 'flex-basis' (or the shorthand 'flex') rather than 'width'.
Pattern 1: Equal-Width Items
/* Distribute space equally with flex-basis: 0 */
.container { display: flex;}
.item {
flex-grow: 1;
flex-basis: 0;
/* Or write as: flex: 1; */
}
With 'flex-basis: auto', item sizes vary based on their content. Setting 'flex-basis: 0' makes all items equal width regardless of content.
Pattern 2: Flexible Items with a Minimum Width
/* Ensure at least 300px, stretch if space available */
.card {
flex: 1 1 300px; /* grow:1 shrink:1 basis:300px */
}
Related Properties
| Property | Description |
|---|---|
| flex-grow | Specifies the grow factor. Controls how much the item grows beyond the 'flex-basis' size. |
| flex-shrink | Specifies the shrink factor. Controls how much the item shrinks from the 'flex-basis' size. |
| flex | Shorthand for 'flex-grow', 'flex-shrink', and 'flex-basis'. Using 'flex' is recommended over specifying them individually. |
If you find any errors or copyright issues, please contact us.
シェアする