弹箱模型解析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,....
