弹箱模型解析1、什么是弹箱模型?.2.柔性盒模型的本质是由两个轴控制的,一个是换行轴,一个是排列方向。开启flexible模式后,称为flexiblecontainer,内外边距都可以正常使用。2.布局的默认方式1.display:block默认为block-block,外部block元素为内部block元素2.display:inline外部默认为inline-inline,inline元素为内部inline元素3.display:inline-blockexternally内联元素是内联元素4.display:flex默认为display:block-flek,向外是块元素,向内是flex盒模型。5.display:inline-flek是inline到外面,flexboxmodel到里面。三、弹性盒模型特点1、默认从左到右排列。2.子元素自动伸缩,灵活。3.默认没有换行,因为换行需要手动控制。:柔性;定义排列方向(主轴)flex-direction:row(默认从左到右)row-reverse(从右到左排列)culumn(从上到下排列)culumn-reverse(从下到上排列)5,换行方式(横轴和副轴)1.默认不换行,分子元素平均宽高。2.弯曲变形:变形;(正常换行,向右,向下)flex-warp:warp-reverse(反向换行,向上,向左)默认nowrap不换行。总结:1、无论任何时候,主轴始终垂直于横轴。2.flex-warp:主轴与轴交叉;(是主轴和交叉轴的简称)。当元素的高度没有设置时,会等比例填充。5.如果不设置宽高,会被内容扩大。centent:flex-ent(主轴结束的位置)3.just-centent:center(主轴元素排列在中间)4.just-centent:space-around(空白元素均匀分布到子元素并且子元素空白是父元素的两部分时间)5.just-centent:space-between(只有子元素有间距)6.just-centent:space-evenly(父元素与其元素之间的距离为equal)7.交叉轴的布局方案Ⅰ,align-items(每一个Howtoalignasub-elementonthecrossaxis)Elasticity1:元素会在主轴上被挤在一起,不会缠绕。弹性2:元素实际上在横轴方向上是有弹性的。当我们不设置height时,元素的高度会根据行数均分Ⅱ、语法和可选值1、align-items:stretch(默认值stretches)2、align-items:flex-start(元素不会沿着横轴的起始位置对齐)3.align-items:flex-end(元素沿着横轴的结束位置对齐)4.align-items:flex-center(元素沿横轴居中)5、align-items:baseline(子元素基线对齐)Ⅰ、align-content(子元素整体在横轴上的对齐、空白处理、多行元素处理)Ⅱ、语法和可选值1、align-content:flex-start;(元素在横轴的起点对齐)2.align-content:flex-end;(元素在横轴上对齐)3.align-context:center;(元素排列在横轴中间)4.align-content:space-between;(每行在横轴的空间内等分,只有子元素有间隙)5.align-content:space-around;(每行子元素之间的间距横轴间距是父元素的两倍)6.align-content:space-evenly;(只有每行的子元素在横轴上有空隙)flexbox模型的子元素样式1.flexbox模型的子元素样式是什么?1、flex盒模型的子元素样式就是在flex容器中设置的子元素样式。二、样式语法和可选值1.顺序:1;(默认值为0改变子元素在flex容器中的位置,值越小越靠前,越靠前,相同的值会跟随元素的顺序)2.flex-成长:1;(默认值为0,flex容器子元素的膨胀系数,只能分配多余的空间,如果小于1,如何按百分比分配,如果大于1,allallocation)3.flex-shrink:1;(默认值为0,弹性容器子元素的收缩系数值越大,收缩越强)4.flex-basis:0px;(设置子元素指定主轴方向的长度)三、CompositeStyle1.flex:扩展和压缩基础;2.可选值:1.auto(计算值为11auto)2.initial(计算值为01auto)3.none(计算值为00auto)4.inherit(从父元素继承)的兼容性弹性盒子模型1.老版本的flex写法1.最早的:display:box;2.过多:显示:flexbox;3.标准:显示器:flex;2.兼容写法1.-webkit-2,....
