1.后台灵活的盒子布局是指为容器中的物品提供更高效的排列、空间分配和布局。灵活性意味着即使项目的大小未知或动态也可以使用！这种布局背后的想法是让容器能够调整项目的宽度、高度和顺序，以充分利用容器内的可用空间——甚至可以适应几乎任何设备和屏幕尺寸。更重要的是，flexbox布局的方向是不可知的，这与常规布局相反（块布局是垂直的，内联是水平的）。虽然方向的概念对于页面来说是好的，但是它缺乏灵活性来支持一些更大更复杂的应用程序（尤其是当方向改变，大小改变，拉伸很小的时候）。注意：弹性盒模型更适合组件化应用和小规模布局。大型布局可以使用Grid布局2.基础知识和术语这部分介绍弹性盒模型中的容器及其Item属性2.1容器属性display我们需要使用display属性来定义一个容器为Flexbox.container{display:flex;/*或者inline-flex*/}flex-direction可以通过该属性定义容器中item的主轴方向，item会沿着主轴排列。Flexbox是一种单向布局模型。您可以考虑将容器中的项目水平或垂直排列。注：下面的一些图解和例子是按照flex-direction为row的情况写的。.container{flex-direction:行|行反转|栏目|column-reverse;}row(default):水平正向排列row-reverse:水平反向排列column:垂直正向排列column-reverse:垂直反向排列单线。您可以使用此属性允许容器尝试多行布局。.container{flex-wrap:nowrap|包装|wrap-reverse;}nowrap(default):只允许单行布局wrap:允许多行布局wrap-reverse:允许多行布局（反向）flex-flow这个属性只是上面两个属性的缩写，默认属性是rownowrap:flex-flow:<'flex-direction'>||<'flex-wrap'>justify-content该属性定义了item沿主轴的排列方式，可以帮助排成一行的所有Flexitem以不同的方式合理利用剩余空间，也可以分配overflowitems：.container{证明内容：flex-start|弹性端|中心|间隔|周围空间|空间均匀|开始|结束|左|正确...+安全|unsafe;}flex-start(default)：左对齐（根据flex-direction）flex-end：右对齐（同上）start：左对齐（但不是根据flex-direction，而是根据writing-mode根元素的属性，用于决定整个页面行布局的方向）end：右对齐（同上）left：左对齐（容器的左边缘，如果flex-direction属性不适用，具体表现等同于start)right：右对齐（同上）center：居中space-between：沿主轴，等间隔排列，第一个和最后一个子组件与父组件的距离为0space-around：沿主轴等间距排列，第一个和最后一个子组件与父组件的距离为1/2。请注意，不同的浏览器对上述属性的支持不同。目前适配较好的属性有flex-start、flex-end和center。最后，我们可以添加一个额外的属性safe和unsafe：safe：保证你不能渲染那些自己渲染到屏幕外的，浏览器内容无法到达它们进行处理unsafe：上面的操作可以align-items这个定义itemsalong轴的第二种排列方式（主横轴，例如主轴为X轴，副轴为Y轴）。具体内容类似于上面的属性：.container{align-items:stretch|弹性启动|弹性端|中心|基线|第一基线|最后基线|开始|结束|自启动|自助终端+...安全|unsafe;}stretch（默认）：拉伸item以填充容器，但服从min-width和max-width属性flex-start/start/self-start：左对齐，不同之处在于flex-direction或写法-modeflex-end/end/self-end：右对齐，区别同上与上面不同的是这个属性是针对多行的。如果只有一行，这个属性就没用了（可以用之前的属性代替）。container{align-content:flex-start|弹性端|中心|间隔|环绕空间|空间均匀|伸展|开始|结束|基线|第一基线|最后基线+...安全|2.2items属性order该属性用于决定items在flex容器中的排列顺序。订单越大，越晚。项目{订单：<整数>；/*defaultis0*/}flex-grow属性定义了item是否有能力在必要的时候扩展自己的size，定义了item本身在flex容器中可以占据的空间比例。如果所有项的值都设置为1，那么容器中的可用空间将平均分配给所有子项。如果一个子项的属性值为2，它将占用其他项的两倍空间。item{flex-grow:
