flex-basis sets a flex item’s initial size along the container’s main axis. The browser uses this flex base size to total the items, compare them with the container, and decide whether items must grow or shrink. section 5.1.1
The browser chooses the base size in this order:
- Use a specified length, percentage, or content-sizing keyword such as content, max-content, min-content, or fit-content directly. section 5.1.1
- For flex-basis: auto, use the item’s width when the main axis is horizontal and width is defined. section 5.1.1 section 5.4
- If flex-basis is auto and width is absent, measure the item’s intrinsic content size. section 5.1.1
- A specified flex-basis overrides a declared width, so flex-basis: 100px takes precedence over width: 200px. section 5.1.1
Fixed basis versus auto
With .item { flex-basis: 250px; }, the base size is 250px. With flex-basis: auto and width: 180px, it is 180px. With flex-basis: 100px and width: 200px, it remains 100px before later growing or shrinking. section 5.1.1
Listing 5.1 The flex base size calculation
<head>
<style>
.container {
display: flex; #1
flex-direction: row; #1
width: 600px; #1
}
.item-1 {
background-color: rgb(166, 166, 166);
flex-basis: 100px; #2
}
.item-2 {
background-color: rgb(219, 219, 219);
flex-basis: 200px; #3
width: 100px; #3
}
.item-3 {
background-color: rgb(166, 166, 166); #4
}
</style>
</head>
<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
</div>
</body>
Inspect a complete row flex container and compare explicit bases with a width overridden by flex-basis. section 5.1.1
The flex shorthand sets flex-grow, flex-shrink, and flex-basis together. A declaration such as flex: 1 can therefore change the basis to 0 while also enabling growth and shrinking, overriding earlier individual settings. section 5.2.3 section 5.4
