Flex (flexible box) 从2009年发布到现在已经不知不觉的过了10年了,现在基本各家浏览器都以及支持了,一些在做项目的小伙伴为了兼容性,最终选择放弃了flex,但是无论是以后新项目的技术选型还是自己对于技术的追逐,flex 对于前端开发来说是必须要掌握的。
对于flex布局来说可用的属性也不多,总共分为两种:一种是应用于容器,另一种应用于容器内子元素。
用于容器的:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
应用于 容器内子元素
order
flex-grow
flex-shrink
flex-basis
flex
align-self
这些属性特性就没有描述的必要了,网上有各种介绍,包括阮一峰老师的工作日志。
本文主要记录两个点,一个是flex 缩放(缩小、放大)的计算、另个是flex特殊值总结规律
注:以下是在chrome80.0版本的表现,ie 表现可能有些差异
一、flex-grow/flex-shink/flex-basis 的计算
flex-grow:
该属性来设置,当父元素的宽度大于所有子元素的宽度的和时(即父元素会有剩余空间),子元素如何分配父元素的剩余空间。 flex-grow
的默认值为0,意思是该元素不索取父元素的剩余空间,如果值大于0,表示索取。值越大,索取的越厉害。 举个例子: 父元素宽400px,有两子元素:A和B。A宽为100px,B宽为200px。 则空余空间为 400-(100+200)= 100px。 如果A,B都不索取剩余空间,则有100px的空余空间。 如果A索取剩余空间:设置flex-grow为1,B不索取。则最终A的大小为 自身宽度(100px)+ 剩余空间的宽度(100px)= 200px 如果A,B都设索取剩余空间,A设置flex-grow为1,B设置flex-grow为2。则最终A的大小为 自身宽度(100px)+ A获得的剩余空间的宽度(100px (1/(1+2))),最终B的大小为 自身宽度(200px)+ B获得的剩余空间的宽度(100px (2/(1+2)))
flex-shink:
该属性来设置,当父元素的宽度小于所有子元素的宽度的和时(即子元素会超出父元素),子元素如何缩小自己的宽度的。 flex-shrink
的默认值为1,当父元素的宽度小于所有子元素的宽度的和时,子元素的宽度会减小。值越大,减小的越厉害。如果值为0,表示不减小。 举个例子: 父元素宽400px,有两子元素:A和B。A宽为200px,B宽为300px。 则A,B总共超出父元素的宽度为(200+300)- 400 = 100px。 如果A,B都不减小宽度,即都设置flex-shrink为0,则会有100px的宽度超出父元素。 如果A不减小宽度:设置flex-shrink为0,B减小。则最终B的大小为 自身宽度(300px)- 总共超出父元素的宽度(100px)= 200px 如果A,B都减小宽度,A设置flex-shirk为3,B设置flex-shirk为2。则最终A的大小为 自身宽度(200px)- A减小的宽度(100px *
(200px *
3/(200 *
3 + 300 *
2))) = 150px,最终B的大小为 自身宽度(300px)- B减小的宽度(100px *
(300px *
2/(200 *
3 + 300 *
2))) = 250px
flex-basis
该属性来设置该元素的宽度。当然,width
也可以用来设置元素宽度。如果元素上同时设置了width
和flex-basis
,那么flex-basis
会覆盖width
的值。
三个属性的优先级为 flex-basis > width > “content”
二、flex 特殊值的计算
总结一句话:flex 只有一个特殊值 none (0 0 auto), 其他情况都是有规律的 ,默认值 1 1 0%,设置的值将默认值进行覆盖。
栗子
特殊值
{
flex: none;
}
{
flex-grow: 0;
flex-shink: 0;
flex-basis: auto;
}
其他三个值都设置的情况
{
flex: 2 2 100px;
}
{
flex-grow: 2;
flex-shink: 2;
flex-basis: 100px;
}
只设置两个值得情况
/* 设置两个数字 即 flex-grow 和 flex-shink 的值,将这个值替换默认值 1 1 */
{
flex: 2 2;
}
{
flex-grow: 2;
flex-shink: 2;
flex-basis: 0%;
}
/* 设置一个数字 一个表示长度的值(百分比或者长度):即flex-grow 和 flex-basis 的值,替换默认值1 0% */
{
flex: 2 200px;
}
{
flex-grow: 2;
flex-shink: 1;
flex-basis: 200px;
}
设置一个值得情况
/* 设置一个数字 即 flex-grow 的值 替换默认值 1 */
{
flex: 0;
}
{
flex-grow: 0;
flex-shink: 1;
flex-basis: 0%;
}
/* 设置表示长度的值(百分比、长度、auto) 即 flex-basis 的值 替换默认值 0% */
{
flex: 100px;
}
{
flex-grow: 1;
flex-shink: 1;
flex-basis: 100px;
}
{
flex: auto;
}
{
flex-grow: 1;
flex-shink: 1;
flex-basis: auto
}
最后在总结一句话