当前位置: 首页 > Web前端 > CSS

弹性盒模型

时间:2023-03-30 23:19:57 CSS

弹性盒模型1.容器的概念指定父元素为flex.parent{display:flex;}.parent_inline{显示:inline-flex;}指定后,floatclearvertical-align将失效。父元素称为flex容器的子元素称为flexitem。容器默认包含主轴和交叉轴。mainstartmainend是主轴的起始位置和结束位置。crossstartcrossend为交叉轴的起始位置和结束位置。弹性项目沿主轴排列。mainsizecrosssize是主轴和横轴所占的空间2.容器的属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content是主轴的方向容器上定义的属性flex-directionrow主轴是水平的,起点在左端(默认值)row-reverse主轴是水平的,起点在右端column主轴是垂直的,起点是alonguppercolumn-reverse主轴是垂直的,起点是loweralongtheflex-wrapitemwrapdirectionnowrapnowrap(default)wrapwrap,wrap-reversewrap上面第一行,flex-flow下面第一行direction,itemjustify-content的简写定义了item在主轴上的对齐方式flex-startleftalignment(默认值)flex-endright-alignedcentercenteredspace-between两端对齐,item之间的间隔相等space-around对齐两端,每个item两边等距对齐flex-start对齐横轴起点flex-end对齐横轴终点以横轴中点为中心alignmentbaseline第一行文本的基线itemstretch如果未设置item设置height或者设置为auto,会占据整个容器的高度(默认值)align-content多轴对齐,单轴无效flex-start与交叉轴起点对齐flex-endaligns与交叉轴中心的终点对齐与交叉轴的中点对齐拉伸轴占据整个交叉轴(默认值)space-between与交叉轴的两端对齐,轴之间的间隔是均匀分布的space-around每个轴两边的间隔相等,所以,轴之间的距离是轴到框架之间距离的两倍。3、item上定义了item的属性orderflex-growflex-shrinkflex-basisflexalign-self。orderitem的order值越小,排列越靠前,默认为0flex-growitem的放大比例默认为0,即如果有剩余空间,则不放大如果flex-grow所有项目的属性为1,它们将平分剩余空间(如果有的话)如果一个项目的flex-grow属性为2,其他项目为1,那么前者占用的剩余空间将是前者的两倍与其他物品一样多。flex-shrinkitem的缩放比例默认为1,即当空间不足时,item会收缩,如果所有item的flex-shrink属性都为1,当空间不足时,会收缩按比例缩小。如果一个item的flex-shrink属性为0,其他item为1,前者在空间不足时不会收缩。flex-basis在分配多余空间之前,item占用的主轴空间默认为auto,即item的原始大小设置为与width或height属性相同的值(比如350px),那么item会占据固定的空间flexflex-grow,flex-shrink和flex-basis的简写默认为0(1auto)auto11autonone00autoalign-selfitem的对齐方式允许单个item有一个与其他item不同的对齐方式,可以通过align-items属性的默认auto来覆盖,即继承父元素的align-items属性,如果没有父元素则stretch。项目{对齐自我:自动|弹性启动|弹性端|中心|基线|拉紧;}这个属性可以取6个值,除了auto,其他的和align-items属性完全一样