一.基本概念
flex意为弹性盒布局,用来为盒装模型提供最大的灵活性,任何一个容器都可以指定为flex布局。
二.容器的属性
- flex-direction:决定了主轴的方向,有四个取值。
row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上方。
- column-reverse:主轴为垂直方向,起点在下方。
- flex-wrap:决定了当内容放不下的时候是否换行,有三个取值。
nowrap(默认):不换行
- wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方。
flex-flow:是flex-direction属性和flex-wrap属性的简写形式。
flex-flow: <flex-direction> | <flex-wrap> 默认值为:row nowrap
- justify-content:决定主轴的对齐方式(没有特殊说明默认主轴为水平方向),有5个取值。
- flex-start(默认值):左对齐
- flex-end:右对齐
center:居中
space-between:两端对齐,项目之间的间隔相等。
space-around:每个项目两侧的间隔相等,所以,项目之间的间隔比项目与边框的间隔大一倍。
- align-items:决定交叉轴的对齐方式(默认是纵轴),有5个取值。
- flex-start:上对齐
- flex-end:下对齐
center:居中
- streth(默认值):如果项目没有设置高度或者高度设置为auto,将沾满整个容器。
- baseline:项目的第一行文字的基线对齐。
- align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用,可以取6个值。
- flex-start:上对齐
- flex-end:下对齐
- center:居中
- space-between:两端对齐,轴线之间的间隔相等。
- space-around:每根轴线两侧的间隔相等,所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- streth(默认值):轴线沾满整个交叉轴。
三. 项目上的属性
- order:决定了项目的排列顺序,值越大排的越靠后。
- flex-grow:当父元素宽度大于所有子元素宽度之和时,决定了每个项目所占用的空间。取值是一个正整数。
- 0:所有项目都为0表示不分配父元素的剩余空间,子元素正常排列。
- 1:所有项目都为1表示等分剩余空间。
- 2:分得的空间是1的2倍,后面的数字以此类推,数字越大表示分得的空间越多。
- flex-shrink:定义了项目的缩小比例,默认为1,表示当空间不足的时候该项目自动缩小。
- 所有项目都为1表示当空间不足的时候,都将等比例缩小。
- 如果有一个项目为0其他项目都为1,则设置为0的项目不缩小。负值对该属性无效。
- 其他数值,相对于1缩小的比例不同,以此类推。
- flex-basis:定义了在分配剩余空间之前,项目主轴占据的空间。浏览器会根据这个属性来计算主轴是否有多余空间。默认值为auto,即项目本来大小。
flex属性:flex属性是flex-grow, flex-shrink 和 flex-basis的简写。
- 0 1 auto:默认值,表示不会分配剩余空间,会等比例缩小。
- auto:表示1 1 auto,会等分剩余空间,会等比例缩小。
- none:表示0 0 auto,不会等分剩余空间,不会等比例缩小。
注意 flex:1,flex:1 等价于 flex:1 1 0%。会等比例缩小并等分所有空间。和flex:auto的区别就是前者是等分所有空间,后者是等分剩余空间。
注意应该优先使用这个属性,而不是分开写。
flex:1更适用于等比例排列所有项目的时候,每个项目空间大小都一致。
flex:auto更适用于充分利用剩余空间的时候,每个项目空间大小不一定一致。
flex:1
flex:auto
- align-self:决定了单个项目在交叉轴上面的排列情况,有6个取值
- auto:默认值
- flex-start:上对齐
- flex-end:下对齐
- center:居中
- streth:如果项目没有设置高度或者高度设置为auto,将沾满整个容器。
- baseline:项目的第一行文字的基线对齐。
注:更多关于flex布局的用法大家可以参考阮一峰flex布局