flex布局的基本知识
首先介绍是什么是flex布局:
flex布局就是一种新的布局方案,通过为修改父div的display属性,让父元素成为一个flex容器,从而可以自由的操作容器中子元素(项目)的排列方式。
容器属性
1.flex-direction属性
取值:
row(默认):横向排列,项目排列顺序为正序1-2-3
row-reverse:同为横向排列,但项目顺序为倒序3-2-1
column :与row相反,为纵向排列,项目顺序为正序1-2-3
column-reverse:同为纵向排列,项目顺序为倒序3-2-1
2.flex-wap属性
取值:
nowwap:不换行
wap:超出父容器宽度会自然换行
wrap-reverse:同样表示换行,需要注意的是第一排会紧贴容器底部,而不是我们想象的项目6紧贴容器顶部,效果与wrap相反。
3.flex-flow属性
flex-flow属性是flex-deriction与flex-wrap属性的简写集合,默认属性为row nowrap,即横向排列,且不换行,如果需要控制项目排列与换行
4.justify-content属性
用于控制项目在横轴的对齐方式
取值:
flex-start:即左对齐
flex-end:右对齐
center:居中
space-between:左右两端对齐,即左右两侧项目都紧贴容器,且项目之间间距相等
space-around:为项目之间间距为左右两侧项目到容器间距的2倍
space-evenly:为项目之间间距与项目与容器间距相等
5.align-items属性
用于控制项目在纵轴的对齐方式
取值:
stretch(默认):如果项目设置高度,或高度为auto,则占满整个容器
flex-start:项目在纵轴紧贴容器顶部
center:居中
flex-end:项目紧贴纵轴底部
baseline:目以第一行文字的基线为参照进行排列
注意,常理来说justify-content与align-items默认分别处理项目横轴,纵轴的对齐方式,但如果我们修改了flex-direction为column,它们处理的轴向会交换,也就是justify-content处理纵轴,align-items处理横轴。
6.align-content
用于控制多行项目的对齐方式,如果项目只有一行则不会起作用
取值:(大体和align-item的方式差不多)
stretch(默认):项目没设置高度,或高度为auto情况下让项目填满整个容器
flex-start:顶部对齐
flex-end:底部对齐
center:居中
space-around:与justify-content保持一致,即项目之间间距为上下两端项目与容器间距两倍。
space-evenly:项目之间间距与项目到容器之间间距相等
space-between:上下两侧项目紧贴容器
项目属性
1.order:默认0
2.flex-grow:默认0
用于决定项目在有剩余空间的情况下是否放大,默认不放大
假设默认三个项目中前两个个项目都是0,最后一个是1,最后的项目会沾满剩余所有空间
假设只有第一个项目默认为0,后面两个项目flex-grow均为1,那么后两个项目平分剩余空间
假设第一个项目默认为0,第二个项目为flex-grow:2,最后一个项目为1,则第二个项目在放大时所占空间是最后项目的两倍
3.flex-shrink:默认1
用于决定项目在空间不足时是否缩小,即空间不足时大家一起等比缩小
但如果某个项目flex-shrink设置为0,则即便空间不够,自身也不缩小
上图中的第二个项目flex-shrink为0,所以自身不会缩小
4.flex-basis:默认auto
用于设置项目宽度,默认auto时,项目会保持默认宽度,或者以width为自身的宽度,但如果设置了flex-basis,权重会width属性高,因此会覆盖widtn属性
上图中先设置了flex-basis属性,后设置了width属性,但宽度依旧以flex-basis属性为准
5.flex:默认auto,0,1
flex属性是flex-grow,flex-shrink与flex-basis三个属性的简写,用于定义项目放大,缩小与宽度。
6.align-self:默认auto
用于让个别项目拥有与其它项目不同的对齐方式
如:对项目二有align-self:flex-end
总结:
flex布局几乎就是这些常用的,如果后续还有的话,我会加以补充。