Size of flex element along the main axis

The width and height properties set the width and height of the flex element regardless of the axis direction. That is, if the axis is horizontal, width will set the width, but if the axis is vertical, width will still set the width. Sometimes this behavior is inconvenient.

In the flex model there is a special property flex-basis, which sets the size of the element along the 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. This property should be set for the flex elements themselves, not their parent. Let's look at examples.

Let's say the main axis is horizontal now, and flex-basis has 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;
}

Let's now flip the axis without changing the value of the flex-basis property. 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; /* the axis is vertical */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Make 5 flex units. Give them a width along the main axis of 100px. Look at the behavior of the units along different axes.

If the axis is horizontal and the block has both flex-basis and width properties, then flex-basis will take precedence. Check this.

If the axis is vertical and the block has both flex-basis and height properties, then flex-basis will take precedence. Check this.