1.flex总结
名词解释:
主轴:默认x轴
交叉轴:默认y轴
项目:父盒子中的子盒子
对齐:排列方式
轴线:多行子元素
1.1 父盒子
1.1.1 flex-direction ;决定主轴方向
row (默认) 主轴水平,起点左端
row-reverse 主轴水平,起点右端
column 主轴垂直,起点在上端
column-reverse 主轴垂直,起点在下端
1.1.2 flax-wrap:如果一行(轴线)放不下元素,设置换行或不换行
nowrap (默认)不换行
wrap 换行
wrap-reverse 换行,且第一行在下方
1.1.3 justify-content:项目在主轴上的对齐方式
flex-start(默认) 主轴起点方向
flex-end 主轴终点方向
center 主轴中间
space-between 最左和最右靠边,空隙平分
space-evenly 最左和最右不靠边,空隙平分
space-around 最左和最右不靠边;两个项目之间的空隙是最左或最右的旁边的空隙的两倍
1.1.4 align-items:定义项目在交叉轴上的对齐方式
stretch(默认) 如果项目未设置高度或者设置为auto,将沾满整个容器的高度
flex-start 交叉轴起点方向
flex-end 交叉轴终点方向
center 交叉轴中间
baseline 项目的第一行文字的基线对齐
1.1.5 align-content:定义了多行轴线的对齐方式。如果只有一根轴线,该属性不起作用。
stretch(默认) 轴线沾满整个交叉轴(高度自适应)
flex-start 多行都在盒子上边
flex-end 多行轴线在盒子的下方
center 多行轴线在盒子的中间
space-between 多行分开,第一行在最上边,最后一行在最下边,空隙平分
space-between 多行分开,每两行之间空隙是第一行离顶部,最后一行离底部的空隙的两倍
1.2 单个子元素
1.2.1 order:定义自己的排列顺序,数值越小,排列越靠前
0(默认)
1.2.2 flex-grow:项目的放大比例,默认即使有空隙也不放大
0(默认)
只有一个是1,其他都是0,1的项目会占据空余空间
全是1,每个项目的一起平分空隙,转换为自己的宽度
一个是2,有1,0的不改变自己的宽度,2的宽度占据的空隙是1的宽度占据空隙的两倍
1.2.3 align-self:定义单个项目的交叉轴方向上的对齐方式,可覆盖父盒子的align-items属性
auto(默认) 继承父元素的align-items属性,如果没有父元素,则等于stretch
stretch 项目未设置高度或者设置为auto,将沾满整个容器的高度
flex-start 交叉轴起点位置
center 交叉轴中间位置
flex-end 交叉轴终点位置
baseline 第一行文字的基线对齐
1.2.4 flex-shrink:项目的缩小比例,默认为1,即如果空间变小,该项目将缩小。
负值无效
1(默认) 都是1的项目将同时缩小
0 该项目值宽高不会发生变化
2 缩小的比例是1的两倍
1.2.5 flex-basis:在分配多余空间之前,项目占据的主轴空间(main size),浏览器根据这个属性,计算主轴是否有多余空间。
auto(默认) 项目的本来大小
length(px) 设置项目占据的固定空间
1.2.6 flex:是flex-grow,flex-shrink和flex-basis的简写,
0 1 auto(默认) 后两个属性可选
auto(1 1 auto) 快捷键
none(0 0 auto) 快捷键