CSS flex-basis Property

The flex-basis CSS property specifies the initial size of the flexible item. If the element is not a flexible item, the flex property is not used.

Syntax

flex-basis: number | auto | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        width: 250px;
        height: 200px;
        border: 1px solid #212b36;
        display: flex;
    }

    .box div {
        -flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 50px;
    }
    .box div:nth-of-type(2) {
        flex-basis: 100px;
    }
</style>
</head>
<body>

<div class="box">
    <div style="background-color:#00ab55;"></div>
    <div style="background-color:#ff4842;"></div>
    <div style="background-color:#ffc107;"></div>
    <div style="background-color:#1890ff;"></div>
</div>

</body>
</html>

Preview

Property Values

Value	Description
number	A length unit, or percentage, that specifies the flexible item's initial length (s).
auto	The default value. The length is the same as the flexible item's length. If no length is specified for the item, the length will be determined by its content.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
flex-basis	29.0 21.0 -webkit-	28.0 18.0 -moz-	9.0 6.1 -webkit-	11.0	17.0

flex

flex-direction

CSS flex-basis Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us