CSS中的flex-basic屬性,指定了彈性項(xiàng)目在主軸方向上的初始尺寸。
.item { flex-basis: 200px; }
上面的代碼表示彈性項(xiàng)目的初始尺寸為200像素。這個(gè)屬性的默認(rèn)值為auto,意味著彈性項(xiàng)目的尺寸將會(huì)由其內(nèi)容來(lái)決定。
如果一個(gè)彈性容器中有多個(gè)彈性項(xiàng)目,并且它們的flex-grow和flex-shrink屬性值都為0,那么它們將會(huì)根據(jù)它們的flex-basis屬性來(lái)分配剩余的空間。
.container { display: flex; } .item { flex-basis: 200px; flex-grow: 0; flex-shrink: 0; }
上面的代碼表示彈性容器中的所有彈性項(xiàng)目都有固定的寬度為200像素,并且不會(huì)隨著容器大小的變化而變化。
需要注意的是,如果彈性項(xiàng)目的flex-basis屬性值為0,那么它的尺寸將會(huì)被設(shè)置為其內(nèi)容所需的最小值。如果flex-basis的值為auto,那么其值將由元素的main size屬性來(lái)決定(例如,元素的width和height屬性)。
總之,flex-basis屬性為開(kāi)發(fā)者提供了一種方便的方式來(lái)控制彈性項(xiàng)目在主軸方向上的尺寸,從而更好地適應(yīng)不同的設(shè)備和屏幕大小。