CSS flex-basis Property

CSS flex-basis Property

The flex-basis property in CSS defines the initial size of a flex item before any growth or shrinking occurs. It can be set in pixels, percentages, or auto.

1. Syntax

selector {
  flex-basis: auto | length | percentage;
}

Value	Description
auto (default)	The item’s size is based on its content or width/height.
length	Defines a fixed size in px, em, rem, etc.
percentage	Defines size as a percentage of the flex container.

2. Basic Example

✅ Default Behavior (flex-basis: auto;)

.container {
  display: flex;
}

.item {
  flex-basis: auto;
  padding: 20px;
  background: lightblue;
}

✅ Each item takes the size of its content.

✅ Fixed Size (flex-basis: 200px;)

.item {
  flex-basis: 200px;
}

✅ Each item starts at 200px before flex rules adjust it.

✅ Percentage-Based (flex-basis: 50%;)

.item {
  flex-basis: 50%;
}

✅ Each item takes 50% of the container width.

3. Example – Different flex-basis Values

.container {
  display: flex;
  gap: 10px;
}

.item {
  padding: 20px;
  background: lightblue;
  text-align: center;
}

.item:nth-child(1) { flex-basis: auto; }
.item:nth-child(2) { flex-basis: 150px; }
.item:nth-child(3) { flex-basis: 30%; }

<div class="container">
  <div class="item">Auto</div>
  <div class="item">150px</div>
  <div class="item">30%</div>
</div>

✅ The second item has a fixed width of 150px, while the third takes 30% of the container.

4. Combining flex-basis with flex-grow and flex-shrink

Instead of setting flex-basis alone, it's often better to use the flex shorthand:

.item {
  flex: 1 1 200px;  /* flex-grow: 1; flex-shrink: 1; flex-basis: 200px; */
}

✅ This means:

• Starts at 200px (flex-basis)
• Can grow if space is available (flex-grow: 1)
• Can shrink if space is tight (flex-shrink: 1)

5. Best Practices

✔ Use auto if elements should size based on content.
✔ Use px or % for predictable layouts.
✔ Combine with flex-grow and flex-shrink for better control.