CSS flex-basis 属性

CSS flex-basis 语法

在 CSS 中，flex-basis 属性用于定义弹性盒子内部子元素的在分配空间之前，该子元素所占的空间大小。浏览器会根据这个属性，来计算父元素是否有多余空间。

很多小伙伴初次见到 flex-basis 这个属性，都会感到很疑惑，完全不知道它是用来干嘛的。说白了，flex-basis 就是 width 的替代品，这两个都用来定义子元素的宽度。只不过在弹性盒子中，flex-basis 的语义会比 width 好一点而已。

语法：

flex-basis: 取值;

说明：

flex-basis 属性取值有以下 2 种：

auto：如果项目设置了 width（或 height），则使用该值；否则，基于内容大小自动计算。
数值：单位可以为 px、em 和百分比等。

flex-basis 属性用来设置子元素的宽度，当然，width 属性也可以用来设置子元素的宽度。flex-basis 的优先级高于 width 或 height 属性。

如果某一个子元素同时设置 flex-basis 和 width，那么 flex-basis 的值会覆盖 width 的值。只有当 flex-basis 设为 auto 并且项目没有其他尺寸限制时，才会考虑 width 或 height。

注意: flex-basis 属性只能用于弹性容器的子项，即作为 display 取值为 flex 或 inline-flex 元素的子元素。

CSS flex-basis 摘要

属于	CSS flex 布局
使用频率	中
是否继承	否
默认值	auto
兼容性	查看
官方文档	查看
MDN	查看

CSS flex-basis 示例

接下来，我们通过一个简单的例子来讲解一下 flex-basis 属性是如何使用的。

示例：flex-basis 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .father {
            display: flex;
            width: 200px;
            height: 100px;
        }
        .son1, .son2, .son3 {
            flex-basis: 100px;
        }
        .son1 {
            flex-shrink: 0;
            background: red;
        }
        .son2 {
            flex-shrink: 1;
            background:blue;
        }
        .son3 {
            flex-shrink: 3;
            background:orange;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
    </div>
</body>
</html>

页面效果如下图所示。

flex-basis 示例

分析：

.son1, .son2, .son3 {
    flex-basis: 100px;
}

对于上面代码，我们把 flex-basis: 100px; 改为 width: 100px;，运行后效果是一样的。这里注意一点，flex-basis 是针对弹性盒子（父元素）下的子元素而已的，不能用于设置弹性盒子的宽度，小伙伴们试一下就知道了。

flex 是一个复合属性

在 CSS 中，flex 是一个复合属性，它有 3 个子属性（如下表所示）。

flex 的子属性
子属性	说明
flex-grow	定义弹性容器中子项的增长比例，决定如何分配多余空间
flex-shrink	定义弹性容器中子项的缩小比例，决定空间不足时如何压缩
flex-basis	定义弹性容器中子项的初始大小，影响其在主轴上的基础长度