A
B
C
摘要：起因工作以后由于大量使用到了布局而碰到了一些尚不清楚的问题，以及一些有意思的特性，在此写篇博客记录一下。三个值的含义众所周知，布局所有的属性有两种一种作用在弹性容器上，一种作用在弹性项目上，而就是作用在弹性项目上的属性。
起因
工作以后由于大量使用到了flex布局而碰到了一些尚不清楚的问题，以及一些有意思的特性，在此写篇博客记录一下。
flex三个值的含义众所周知，flex布局所有的属性有两种：一种作用在弹性容器（Flex container）上，一种作用在弹性项目（Flex item）上，而flex就是作用在弹性项目上的属性。
flex 是 flex-grow、flex-shrink、flex-basis 三个值的简写，这个值规定了弹性项目如何伸长或压缩以适应弹性容器中的可用空间。
flex-grow 定义弹性项目的放大比列，可以接受数字（小数也可以），不接受负值，默认值是 0 。这个值如果为 0 就意味着即使容器内还存在剩余空间，弹性项目也不会放大。
flex-shrink 定义弹性项目的收缩比例，同样接受数字（小数也可以），不接受负值，默认值是 1 。如果一个弹性项目的 flex-shrink 设为 0 而其他弹性项目的 flex-shrink 值为 1 ，则当弹性容器空间不足时，该弹性项目不会被压缩，而其他的弹性项目会被等比例压缩。
flex-basis 定义在分配容器内空间之前，弹性项目占据的主轴空间（不一定是宽度，因为主轴方向可以是纵向的），默认值是 auto 。如果对弹性项目同时设置 flex-basis 和 width ， width 会被忽略。还要注意当主轴是横向的时候，如果设定了 max-width 或 min-width 会限制弹性项目的宽度。
这里讲一下 flex-basis 取值的情况：
指定的数值，比如以px、em为单位的数值。
百分数，取百分数的话就是相对其父弹性容器的宽或高（取决于主轴方向）来计算，如果包含块的尺寸未指定（也就是说父元素的尺寸取决于子元素），那么这时候结果和 auto 一样。
auto 值的意思是基于弹性项目的 width 或 height 调整大小（根据主轴的横向或者纵向），如果没有设置 width 或 height 则根据内容自适应。
设置flex之后的弹性项目如何计算宽度这里给一个代码的例子
ABC
#content {
display: flex;
width: 360px;
}
.box1 {
width: 100px;
flex: 1 1 0;
}
.box2 {
width: 100px;
flex: 1 1 0;
}
.box3 {
width: 100px;
flex: 1 1 0;
}
由于flex-basis的值为 0 ，所以此时弹性容器的剩余空间为 360px - 0 * 3 = 360px ，由于3个元素都设置了 flex-grow: 1 ，所以剩余空间3个元素所占比例为 1:1:1 ，每个元素的宽度就是 360px / 3 = 120px 。
如果把代码改一下呢？
#content {
display: flex;
width: 360px;
}
.box1 {
width: 100px;
flex: 1 1 0;
}
.box2 {
width: 100px;
flex: 1 1 auto;
}
.box3 {
flex: 1 1 200px;
}
此时，弹性容器内剩余宽度为：360px - 0 - 100px - 200px = 60px，3个元素所占剩余空间比例同样是 1:1:1 。那么宽度分别就是：0 + 20px = 20px ，100px + 20px = 120px ，200px + 20px = 220px 。
对应复杂情况的计算，这里有一个回答写得不错：
flex设置成1和auto有什么区别
flex单值、双值、三值的赋值规则是怎么样的单值情况下：
一个无单位的数字：它会被当作 flex-grow 的值，flex-shrink 为 1 ，flex-basis 为 0%。
一个有效的宽度值：它会被当作 flex-basis 的值，flex-shrink 和 flex-grow 都是 1 。
关键字：比如 auto，none 这两个下文会讲。
双值情况下：
第一个值必须是无单位的数字，它会作为 flex-grow 的值；第二个值可以是：
一个无单位的数字：它会被当作 flex-shrink 的值，而flex-basis 的值就是 0% 。
一个有效的宽度值：它会被当作 flex-basis 的值，flex-shrink 的取值就是 1 。
三值情况下：
第一个和第二个值必须是无单位的数，分别作为 flex-grow，flex-shrink，flex-basis 的值；第三个值可以是有效的宽度值，也可以是 auto 。
flex: 0，flex: 1，flex: auto，flex: none，flex: 0%的区别是什么？讲完了上面的三种赋值方式之后，那么简写就变得很容易理解了：
flex: 0 是 flex: 0 1 0% 的简写
flex: none 是 flex: 0 0 auto 的简写
flex: 1 是 flex: 1 1 0% 的简写
flex: auto 是 flex: 1 1 auto 的简写
flex: 0% 是 flex: 1 1 0% 的简写
小结一下：以上就是对 flex 这个属性取值的梳理，最近一年没有写过博客，最近还是要填一下坑的，前端之路且歌且行～
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114130.html
摘要：今天想写的问题来自于网易一面的时候，面试官问我如何在移动端的页面上画一条的线。上面的结论我在端谷歌浏览器的设备模拟器里证实了有效，但是安卓和真机并没有试过。 起因 最近一个月都在准备校招，所以没什么时间写博客。今天想写的问题来自于网易一面的时候，面试官问我如何在移动端的页面上画一条1px的线。这个问题我模糊地记得之前看过相关文章，但是我清楚地记得当时自己脑子一片空白。是的，一面挂了，但...
摘要：浏览器兼容问题什么是浏览器兼容所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。 浏览器兼容问题 1、什么是浏览器兼容 所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。 2、浏览器兼容产生的原因 因为不同浏览器使用内核及所支持的HTML等网页语言标准不同； 以及用户客户端的环境不同（如...
摘要：布局是年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。实践用来实现圣杯布局圣杯布局指的是一种最常见的网站布局。一般情况下，这种布局要求固定高度，固定宽度，自适应。 Flex 布局是 W3C 2009年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。Flex 布局使用起来是非常简单的，本文谈一谈平时使用可能需要注意的问题。 align-content 平时使用 ...
摘要：组件化编码的一切都是基于组件的。属性返回目标节点的前一个兄弟节点。如果目标节点前面没有同属于一个父节点的节点，将返回属性是一个只读属性。而当变量离开环境时，则将其标记为离开环境。 第一次写面试经历，虽然之前有过一些电话面试经历，但相对而言感觉此次的经历对自己收获还是比较大，这里留下面经当作日记吧！（面试时间：2018-6-12 下午2:10；时长：50min；公司：*） 1、说说Rea...
摘要：组件化编码的一切都是基于组件的。属性返回目标节点的前一个兄弟节点。如果目标节点前面没有同属于一个父节点的节点，将返回属性是一个只读属性。而当变量离开环境时，则将其标记为离开环境。 第一次写面试经历，虽然之前有过一些电话面试经历，但相对而言感觉此次的经历对自己收获还是比较大，这里留下面经当作日记吧！（面试时间：2018-6-12 下午2:10；时长：50min；公司：*） 1、说说Rea...
阅读 1901·2021-10-14 09:43
阅读 1984·2019-08-30 15:55
阅读 636·2019-08-30 14:23
阅读 1887·2019-08-30 13:21
阅读 1086·2019-08-30 12:50
阅读 2107·2019-08-29 18:46
阅读 2184·2019-08-29 17:28
阅读 2189·2019-08-29 17:21
