弹性盒就是自由伸缩的盒子,通常在移动端排版当中,适配屏幕是非常繁琐的事情,是因为各个终端屏幕和像素都不一样,弹性盒能够帮助我们快速适配各个不同的屏幕
弹性盒的主要属性:
弹性盒子的属性
-
display:flex; //将当前元素变成弹性盒
inline-flex;
-webkit-flex ;
将盒子转化为弹性盒以后,那么盒子内的元素会默认排成一行; -
定义盒子内的元素的排列方向
flex-direction:
row:排成行,也是默认值;
row-reverse:以相反的方向排成一行;
column:排成列
column-reverse:以相反的方向排成一列 -
定义盒子内的子元素的对齐方式
横向对齐: justify-content:
flex- start默认的对齐方式,从第一个子元素开始对齐;
flex- end:从最后一个子元素开始对齐;
center:从中间位置对齐,平均分布
space-between:两端对齐
space-around:均分空白区域
纵向对齐: align-items:
flex- start:从第一个元素开始对齐,第一个子元素排列在父元素起始位置
flex- end:从最后一个元素开始对齐,最后一个子元素排列在父元素结束位置
center:从中间开始对齐
baseline :从元素的基线对齐
stretch:拉伸对齐 -
规定子元素在父元素内是否换行
flex-wrap:
nowrap:不换行,一行显示,所以有可能溢出,默认值
wrap:换行显示
wrap-reverse:换行,但是以相反的顺序来排序
initial:设置属性值为该属性的默认值
inherit:继承父元素的属性值 -
设置行的行为
align-content :
flex-start:项目位于父元素的开头
flex-end:项目位于父元素的末尾
center:项目位于父元素的中心
space-between:项目位于父元素的两端,中间留有空白
space-around :均分父元素的空白区域
stretch:默认值,项目被拉伸来适应父元素
弹性盒内的子元素的属性
- margin值
居中的效果: margin: auto;
等同于给父元素添加横向纵向都居中对齐 - order:规定子元素的显示顺序
order:
默认值是0,负数向前,正数向后排列,
如果同时添加多个order,那么数字小的排列在前面 - flex:规定子元素所占据的空间
flex:1,2,3, - align-self:覆盖父元素的align- items属性;
auto:默认值,继承父元素的属性,如果父元素没有设置该属性,则为stretch;
stretch:元素被拉伸以适应父元素
center:元素位于父元素的中心
flex-start :元素位于父元素的开始位置
flex-end:元素位于父元素的额结束位置
baseline:元素位于父元素的基线上