今天,上网找了下各种flex的博文学习了一番,资料如下:
阮一峰的网络日志
Dive into Flexbox
2009年,W3C提出了---Flex布局,特点是
简便
完整
响应式
兼容性如下
查询链接
介绍
Flex(Flexible Box),意思为"弹性布局"
任何一容器都可以指定为Flex布局,甚至行内元素也可以
.box{
display:flex;
}
.box{
display:inline-flex;
}但是由于支持的情况各不相同,我们还是需要对属性做兼容性处理如加上-webkit-前缀等.
失效特性
float
clear
vertical-align
理解
容器采用flex布局后,就被称为flex容器(flex container),子元素被称为容器成员,为flex项目(flex item)
对于flex布局其实理解下图即可
容器中默认有两根轴,主轴(main axis)和cross axis(交叉轴)
开始结束位置分别为main/cross start和main/cross end
排列的顺序为main/cross direction.
flex item占据main axis上空间为main size,占据cross axis上的空间为cross size.
flex属性
容器属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction
用于改变flex容器的轴线,默认值为row
row(default)
row-reverse(就和后缀一样,为main axies反向排列)
column(改变轴线为cross axies,为cross axies方向排列)
column-reverse(同理改变轴线,cross axies方向反向排列)
justify-content
用于改变flex容器中flex item在轴线上的位置
flex-start(default,从axies start开始紧靠排列)
flex-end(axies end端紧靠排列)
center(展现如其名,axies中间)
space-between(相当于将空间等分,每份空间中flex-start排列)
space-around(空间等分,每份空间中center排列)
align-items
为justify-content的补充属性,为flex item在非flex-direction指定的另一轴线的位置
flex-start(default)
flex-end
center
以上三种也就不赘述啦stretch (如同属性名一样,将元素在轴向上伸展开来,注意在固定了height的情况下不会拉伸)
baseline (定位线为item中第一行文字的底部线,根据该线进行定位,也就是基线对齐,取距离start最长的基线对齐)
值得注意的是属性值baseline,其基线的定义需要进一步了解
链接:
https://www.w3.org/TR/2016/CR...
https://www.w3.org/TR/2016/CR...
https://www.w3.org/TR/css-fle...
其中基线定义会根据情况不同而变化,通常情况下为第一项的底线(文字底部/图片底部),无内容的flex item为flex item底部border线.
flex-wrap
直到现在为止,每个Flex 容器只有一条Flex Line,使用flex-wrap,我们能创建一个拥有多条Flex Line的Flex 容器
nowrap(default)
wrap
wrap-reverse
设置为wrap时,假如我们一行空间不够,我们的flex item在空间不足时会进行换行.创建新的一行.
设置为wrap-reverse时,在wrap换行效果的同时,将会反向展现
align-content
该属性定义了flex-wrap的行为,这和align-item有点相似,但是和其不同的是该属性align的是Flex Line.
stretch(default)
flex-start
flex-end
center
space-between
space-around
看到他们其实大概就知道是怎么回事啦,这里也就不多说了,其实想象一下就知道了,主要是用于设置行/列位置的属性
flex-flow
= flex-direction + flex-wrap
用于快速设置上述两个属性.
项目(item)属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
值得注意的属性
margin
在flex布局中,margin:auto是一个很有用的属性,设置后会自动吸收多余的空间,可以利用flex item的该属性进行多样化的布局.
order
设置元素的顺序,数值越小,排列越前,默认为0
flex-grow
为放大比例,默认为0
flex-shrink
定义了缩小比例,默认为1,即如果空间不足,项目将会缩小
所有项目为1时,空间不足,都会缩小,如果你不希望某个容器在任何时候都不被压缩，那设置flex-shrink:0;数值代表被缩小的程度
!负值无效者缩小
flex-basis
在分配多余空间前,项目占据的主轴的空间,浏览器将根据该属性,计算主轴空间是否有多余空间.
auto(default)
<length> 设定为width/height一样的值如50px,即固定项目占据的空间
flex
顺序为 flex-grow flex-shrink flex-basis,默认为0 1 auto,后两个属性为可选选项
auto(1 1 auto)/none(0 0 auto)
align-self
用于覆盖Flex容器中的align-items属性,它有和align-items相同的属性值
auto(继承align-items属性,无父元素则等同于stretch)
stretch
flex-start
flex-end
center
baseline
