伸缩容器的属性
display: flex
定义为弹性布局
flex-direction 决定主轴的方向
flex-directon: row
默认值,定义主轴方向为X轴,从左到右排列;
flex-directon: row-reverse
定义主轴方向为X轴,从右到左排列;
flex-directon: column
定义主轴方向为Y轴,从上到下排列;
flex-directon: column-reverse
定义主轴方向为Y轴,从下到上排列;
justify-content 元素在主轴方向上的对齐方式
justify-content: flex-start
默认值,定义元素在主轴方向的起始位置对齐;
justify-content: flex-end
定义元素在主轴方向的结束位置对齐;
justify-content: center
定义元素在主轴方向的中心位置对齐;
justify-content: space-between
定义元素平局分配在主轴上, 第一个元素在主轴的起始位置,最后一个元素在主轴的结束位置;
justify-content: space-around
在每行上均匀分配弹性元素,相邻元素间距相等,每行第一个元素到行首的距离和最后一个元素到行尾的距离相邻元素间的一半;
align-items 元素在交叉轴方向上的对齐方式
align-items: flex-start
定义元素在交叉轴方向上的起始位置对齐;
align-item: flex-end
定义元素在交叉轴方向上的结束位置对齐;
align-item: center
定义元素在交叉轴方向上的中心位置对齐;
align-item: stretch
默认值,当元素没有设置大小时,主轴方向上的尺寸由内容撑开,交叉轴方向上的尺寸自适应铺满。
align-item: baseline
设置元素基线对齐;
align-content定义了多根轴线的对齐方式。
如果项目只有一根轴线,该属性不起作用。
align-content: flex-start
定义元素在交叉轴方向上的起始位置对齐;
align-content: flex-end
定义元素在交叉轴方向上的结束位置对齐;
align-content: center
定义元素在交叉轴方向上的中心位置对齐;
align-content: stretch
默认值,当元素没有设置大小时,主轴方向上的尺寸由内容撑开,交叉轴方向上的尺寸自适应铺满。
align-content: space-between
与交叉轴两端对齐,轴线之间的间隔平均分布。
align-content: space-around
每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
flex-wrap 定义元素是否换行
flex-wrap: nowrap
默认值 不换行;
flex-wrap: wrap
换行,第一行在上方;
flex-wrap: wrap-reverse
换行第一行在下方;
flex-flow
flex-flow是flex-direction和flex-wrap的简写形式,默认值为:row nowrap;
伸缩子项的属性
order定义伸缩子项的排列顺序
默认值为0,数值越小,排列越靠前,可以设置负值
flex-grow 定义伸缩子项的放大比例
默认值为0,即如果存在剩余空间,也不放大;
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
flex-shrink 定义伸缩子项的缩小比例
默认值为1,即如果空间不足,该项目将缩小;
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
flex-basis 项目占据的主轴空间
当成width使用;
flex 复合写法
flex: flex-grow flex-shrink flex-basis;
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
align-self 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
align-self: auto
默认值,表示继承元素的align-items属性
align-self: flex-start
定义元素在交叉轴方向上的起始位置对齐;
align-self: flex-end
定义元素在主轴方向的结束位置对齐;
align-self: center
定义元素在交叉轴方向上的中心位置对齐;
align-self: baseline
设置元素基线对齐;
align-self: stretch
当元素没有设置大小时,主轴方向上的尺寸由内容撑开,交叉轴方向上的尺寸自适应铺满。