flex-basis sets a flex item’s initial main size before the browser distributes free space. In a row, this usually means an initial width; in a column, it means an initial height. It accepts values usable for width, including pixels, ems, and percentages. Its default, auto, uses a declared width when available or sizes the item naturally from its contents. section 4.2.1 section 4.3.1
Figure 4.8 Three flex items with a flex basis of 20%, giving each an initial main size (width) of 20%
Three items with flex-basis: 20% each show how the property establishes equal initial sizes before growth or shrinking changes the final layout. section 4.2.1
Read flex-basis together with the other two flex sizing controls:
- Treat flex-grow as the rule for distributing unused space after the initial sizes, gaps, and margins are accounted for. A basis of 0% makes the remaining container space the main quantity being divided. section 4.2.2
- Treat flex-shrink as the rule for reducing items when their initial sizes exceed the container. Larger initial items generally surrender more space, while flex-shrink: 0 prevents reduction. section 4.2.3
- Remember that a non-auto flex basis takes precedence over width. For reusable proportions, flex: 2 and flex: 1 provide shorthand values equivalent to flex-grow values with flex-shrink: 1 and flex-basis: 0%. section 4.2.1 section 4.2
Proportional columns
A two-column layout can start with explicit proportions: .column-main { flex: 66.67%; } and .column-sidebar { flex: 33.33%; }. With flex-shrink: 1, the columns can surrender some width to accommodate a 1.5em gap. Alternatively, flex: 2 on the main column and flex: 1 on the sidebar uses a zero basis and divides the remaining space two-thirds to one-third. Padding can make these approaches differ slightly; use grid when measurements must be precise. section 4.2.3 section 4.2.4
The main axis determines what flex-basis measures. Nested flex containers can therefore use it for widths in a row and heights in a column. In a vertical flexbox, growth or shrinking affects height only when another constraint gives the container a definite height. section 4.3.1
