flex-basis property

The flex-basis property specifies a size of a specific flex block before other flex properties are applied to it. In general, the property specifies the size of an element along a main axis. This means that if the main axis is horizontal, this property will set the width of the elements, and if it is vertical, then the height.

It applies to a specific flex block.

This property is a part of the shorthand flex property.

Syntax

selector {
	flex-basis: any CSS units (and percentage) | auto;
}

Default value: auto.

Example

Let our main axis be horizontal, and flex-basis have a value of 50px. In this case, the width of the elements will be 50px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent	{
	display: flex;
	flex-direction: row; /* axis is horizontal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* element size */
	border: 1px solid green;
}

Example

Let's now flip the axis without changing the flex-basis property value. In this case, the height of the elements will be 50px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: column; /* axis is vertical */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

flex-basis property

Syntax

Example

Example

See also