flex:1 表达的含义

flex 布局，我相信大家都非常熟悉, 但是要说到 flex:1 表达的含义，我相信很多同学说不出来。

很多同学入门flex 的时候，应该都是看了阮一峰的flex 科普文章

阮一峰对 flex 科普文章

想要梳理清晰flex:1的含义，我们先学习下flex 这个css属性表达了哪些含义

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
从这里就可以推导出

flex: 1

相当于

flex: 1 1 auto.

我一开始理解的也是这样。后面的分析会推翻我这里的结论

flex-basis 也是一个比较难理解的点，我写了深入理解flex-basis来梳理这个知识点，不懂得可以查看。这里我们重点解析flex:1。
我写了一个简单的demo 来提供分析：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       html, body {
           margin: 0;
       }
       .container {
           display: flex;
           width: 100%;
       }

       .c1 {
           background-color: green;
           flex:1; 
       }
       .c2 {
           background-color: red;
            flex:1; 
       }
       .c3 {
           background-color: wheat;
           flex:1; 
       }
   </style>
</head>
<body>
   <div class="container">
       <div class="c1">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</div>
       <div class="c2">啦啦啦啦啦啦</div>
       <div class="c3">啦</div>
   </div>
</html>

我们看下浏览器输出的效果：

缩放一下

可以看到，无论内容是多少，我们都实现等分。

我们看下控制台：

发现：

flex: 1

其实相当于：

flex-grow: 1
flex-shrink: 1
flex-basix: 0%

看另一个例子：

      .c1 {
            background-color: green;
            flex: 1 1 20%;
        }
        .c2 {
            background-color: red;
            flex: 1 1 20%;
        }
        .c3 {
            background-color: wheat;
            flex: 1 1 20%;
        }

浏览器显示效果：

依然是等分

再来一个类似的例子：


      .c1 {
            background-color: green;
            flex: 1 1 10;
        }
        .c2 {
            background-color: red;
            flex: 1 1 10;
        }
        .c3 {
            background-color: wheat;
            flex: 1 1 10;
        }

浏览器显示效果：

image.png

依然是等分

从以上的分析调试，我们可以初步分析

flex: 1 浏览器里解析的是 1 1 0%，实现的效果是所有元素等分
flex-basic 只要是（number类型 + 单位）,实现的效果都是等分

接下来，看下 flex: 1 1 auto 的效果

      .c1 {
            background-color: green;
            flex: 1 1 auto;
        }
        .c2 {
            background-color: red;
            flex: 1 1 auto;
        }
        .c3 {
            background-color: wheat;
            flex: 1 1 auto;
        }

浏览器显示效果：

没有等分

总结

写到这里，我们在细细品味下flex-basic的含义

flex-basis属性定义了在分配剩余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。

auto 表示项目本身的大小, 如果设置为 auto, 那么这三个盒子就会按照剩余的空间，等比例缩放

剩余的空间 = 总的width - c1.width - c2.width - c3.width

如果随便设置一个其他带有长度单位的数字呢, 例如

        .c1 {
          background-color: green;
            flex: 1 1 10px;
        }
        .c2 {
            background-color: red;
            flex: 1 1 10px;
        }
        .c3 {
            background-color: wheat;
            flex: 1 1 10px;
        }

剩余的空间 = 父width - c1.width - c2.width - c3.width

又因为 c1.width = c2.width = c3.width，所以最终的效果就是 c1, c2, c3 进行了等分缩放。

flex:1 表达的含义

总结

推荐阅读更多精彩内容