- Objective: - Breadcrumb: # 概念阐释 - 改变`flex-item`在主轴上的`size`, `row`改变的是`width`，`column`改变的是`height`。 - 单位可以是：`px`，`%`，`em` ## 语法 ``` /* 指定<'width'> */ flex-basis: 10em; flex-basis: 3px; flex-basis: auto; /* 固有的尺寸关键词 */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* 在 flex item 内容上的自动尺寸 */ flex-basis: content; /* 全局数值 */ flex-basis: inherit; flex-basis: initial; flex-basis: unset; ``` # 实例 # 相关内容 - 当一个元素同时被设置了 `flex-basis` (除值为 `auto` 外) 和 `width` (或者在 `flex-direction: column` 情况下设置了`height`) , `flex-basis` 具有更高的优先级。 - 仍然不会超过`container`盒子的`size`，如果`container`为`200px`，`flex-basis`为`250px`无效 # 参考资料 - [MDN-flex-basis](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis)