Suggest an editImprove this articleRefine the answer for “What does flex-basis do?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`flex-basis`** sets the initial size of a flex item along the main axis, before `flex-grow` and `flex-shrink` are applied; it is the "base width" (or height with `column`) from which the element starts in calculations. **Key point:** `flex-basis` is the starting size of a flex item before free space distribution.Shown above the full answer for quick recall.Answer (EN)Image`flex-basis` sets **the initial size of a flex item along the main axis**, before `flex-grow` and `flex-shrink` are applied. That is, it is the "base width" (or height, if `flex-direction: column`), from which the element starts in calculations. Examples: ```css .item { flex-basis: 200px; /* the element initially takes up 200px */ } ``` If `flex-direction: row` → `flex-basis` works as width. If `flex-direction: column` → `flex-basis` works as height. Special cases: ```javascript flex-basis: auto; /* the size is taken from width/height or the content (default behavior) */ flex-basis: 0; /* ignore the content and divide the free space only by flex-grow */ ``` In short: `flex-basis` **is the starting size of a flex item before free space distribution.**For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.