The flex-basis
CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing
.
Note: in case both flex-basis
(other than auto
) and width
(or height
in case of flex-direction: column
) are set for an element, flex-basis
has priority.
/* Specify <'width'> */ flex-basis: 10em; flex-basis: 3px; flex-basis: auto; /* Intrinsic sizing keywords */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* Automatically size based on the flex item’s content */ flex-basis: content; /* Global values */ flex-basis: inherit; flex-basis: initial; flex-basis: unset;
The flex-basis
property is specified as either the keyword content
or a <'width'>
.
<'width'>
<length>
, a <percentage>
of the parent flex container's main size property, or the keyword auto
. Negative values are invalid.content
auto
together with a main size (width or height) of auto
.History:
flex-basis:auto
meant "look at my width
or height
property".flex-basis:auto
was changed to mean automatic sizing, and "main-size" was introduced as the "look at my width
or height
property" keyword. It was implemented in bug 1032922.auto
once again means "look at my width
or height
property"; and a new content
keyword is being introduced to trigger automatic sizing. (bug 1105111 covers adding that keyword).content | <'width'>
<ul class="container"> <li class="flex flex1">1: flex-basis test</li> <li class="flex flex2">2: flex-basis test</li> <li class="flex flex3">3: flex-basis test</li> <li class="flex flex4">4: flex-basis test</li> <li class="flex flex5">5: flex-basis test</li> </ul> <ul class="container"> <li class="flex flex6">6: flex-basis test</li> </ul>
.container { font-family: arial, sans-serif; margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; } .flex { background: #6AB6D8; padding: 10px; margin-bottom: 50px; border: 3px solid #2E86BB; color: white; font-size: 20px; text-align: center; position: relative; } .flex:after { position: absolute; z-index: 1; left: 0; top: 100%; margin-top: 10px; width: 100%; color: #333; font-size: 18px; } .flex1 { flex-basis: auto; } .flex1:after { content: 'auto'; } .flex2 { flex-basis: max-content; } .flex2:after { content: 'max-content'; } .flex3 { flex-basis: min-content; } .flex3:after { content: 'min-content'; } .flex4 { flex-basis: fit-content; } .flex4:after { content: 'fit-content'; } .flex5 { flex-basis: content; } .flex5:after { content: 'content'; } .flex6 { flex-basis: fill; } .flex6:after { content: 'fill'; }
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module The definition of 'flex-basis' in that specification. | Candidate Recommendation | Initial definition |
Initial value | auto |
---|---|
Applies to | flex items, including in-flow pseudo-elements |
Inherited | no |
Percentages | refer to the flex container's inner main size |
Media | visual |
Computed value | as specified, but with relative lengths converted into absolute lengths |
Animation type | a length, percentage or calc(); |
Canonical order | the length or percentage before the keyword, if both are present |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 29
|
12
|
22
|
11
|
12.1
|
9
|
auto |
21 | 12 | 18 | 11 | 12.1 | 7
|
content |
No | 12 | 61 | No | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 4.4
|
29
|
Yes
|
22
|
12.1
|
9.2 | ? |
auto |
? | ? | Yes | 18 | 12.1 | ? | ? |
content |
? | No | Yes | 61 | No | No | No |
width
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis