What is CSS flex-basis property?

CSS Reference Manual
CSS Attributes

The best CSS flex-basis property Tutorial In 2024, In this tutorial you can learn Examples,Browser Support,Definition and Usage,CSS Syntax,Property Value,related articles,

CSS flex-basis property

Previous: CSS flex properties

Next: CSS flex-direction property

CSS Reference

Examples

Set the second element of the flexible pouch initial length is 80 pixels:

div:nth-of-type(2) {flex-basis: 80px;}

Browser Support

Figures in the table represent the first browser to support the property version number.

Immediately following the digital -webkit-, -ms- or -moz- after the first version to support the prefix property.

Attributes
flex-basis	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

Definition and Usage

flex-basis attribute is used to set or retrieve the flexible pouch stretching the reference value. .

Note: If theelement is not resilient element box object, the flex-basis property does not work.

Defaults:	auto
inherit:	no
Can be animated:	Yes. Please refer to animation (Animatable) . try it
version:	CSS3
JavaScript syntax:	object .style.flexBasis = "200px"try

CSS Syntax

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

Property Value

值	描述
number	一个长度单位或者一个百分比，规定灵活项目的初始长度。
auto	默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。
initial	设置该属性为它的默认值。请参阅 initial 。
inherit	从父元素继承该属性。请参阅 inherit 。