在开发的时候经常用 flex 这个属性作用于弹性盒子的子元素，例如：flex:1或者flex: 1 1 auto，那么这个属性到底控制了元素怎么的行为呢？flex:1又究竟是什么含义呢？让这篇文章带你彻底了解 flex 属性吧！【推荐学习：css视频教程】
首先我们需要了解，flex 是三个属性 flex-grow 、flex-shrink 、flex-basis的简写，可以使用一个、两个、或者三个值指定 flex 属性。具体语法可以参考css视频教程
接下来我们逐一拆解这三个属性对元素的影响
flex-basis
flex-basis 定义了空间分配发生之前初始化 flex 子元素的尺寸，属性默认值 auto； flex 子元素未伸张和收缩之前，它的大小是多少。
如果 flex-basis 设置为 auto , 浏览器会先检查 flex 子元素的主尺寸是否设置了 flex 子元素的初始值。
比如说你已经给你的 flex 子元素设置了 150px 的宽，则 150px 就是这个 flex 子元素的 flex-basis；如果没有设置，则 auto 会解析为其内容的大小。这个例子中，给第一个元素设置宽度150px，第二、三个元素不设置宽度。
:first-child { width: 150px;}
登录后复制
效果如下：
如果你想 flexbox 完全忽略 flex 子元素的尺寸就设置 flex-basis 为 0。这样就算元素一设置了宽度，它最终的宽度也是内容宽度。
正负自由空间
在介绍剩下两个属性前先看两个概念 positive free space 正向自由空间和 negative free space反向自由空间:
正向自由空间
比如说，现在有 500px 宽的 flex 容器，flex-direction 属性值为 row, 三个 100px 宽的 flex 子元素， 那么没有被填充的 200px 的 就是正向自由空间(positive free space)。
反向自由空间
当子元素的宽度总和大于容器宽度时，溢出的尺寸100px就是反向自由空间。
那么用什么属性分配正负自由空间呢？
flex-grow
flex-grow 默认值 0，若被赋值为一个正整数， flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸，并占据可用空间。flex-grow 按比例分配增长空间。
初始状态：我们给三个元素都设定宽度，并且总和不大于主轴宽度
.flex-grow-father { width: 500px; div:nth-child(1) { width: 50px; } div:nth-child(2) { width: 100px; } div:nth-child(3) { width: 150px; }}
登录后复制
增加的宽度计算方法：假设元素的 flex-grow 值为 x，正向自由空间宽度为l，则每个元素增加的宽度=xx的总和∗lcss视频教程）
.with-same-flex-grow { * { flex-grow: 1; }}
登录后复制
.with-different-flex-grow { div:nth-child(1) { flex-grow: 2; } div:nth-child(2) { flex-grow: 1; } div:nth-child(3) { flex-grow: 1; }}
登录后复制
.average { * { /* flex: 1 1 0; */ flex-basis: 0; flex-grow: 1; }}
登录后复制
.flex-shrink-wrapper { display: flex; div:nth-child(1) { width: 100px; background: gold; } div:nth-child(2) { width: 200px; background: tan; } div:nth-child(3) { width: 300px; background: gold; }}.zero { * { flex-shrink: 0; }}
登录后复制
.with-same-flex-shrink { * { flex-shrink: 1; }}
登录后复制
.with-different-flex-shrink { div:nth-child(1) { flex-shrink: 1; } div:nth-child(2) { flex-shrink: 2; } div:nth-child(3) { flex-shrink: 0; }}
登录后复制
.two-grid-wrapper { display: flex; margin-top: 20px; height: 200px; .left { width: 200px; background-color: gold; } .right { flex: 1; background-color: tan; }}
登录后复制
.three-grid-wrapper { display: flex; margin-top: 20px; height: 200px; .left { width: 200px; background-color: gold; } .right { width: 200px; background-color: gold; } .center { flex: 1; background-color: tan; }}
登录后复制
以上就是一文详解三个 flex 属性对元素的影响的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2865755.html
