好程序员web前端分享CSS3弹性盒子1.盒子模型box-sizingbox-sizing属性可以让你定义特定的元素以特定的方式匹配某个区域.box-sizingbox-sizing属性允许您定义以特定方式匹配特定区域的特定元素。Image6border-box为元素设置的宽高决定了元素的边框框。也就是说，为元素指定的任何填充和边框都将在设置的宽度和高度内绘制。内容的宽度和高度分别由设置的宽度和高度减去border和padding得到。图72.传统的灵活盒模型布局解决方案，基于盒模型，依赖display属性+position属性+float属性。对于那些特殊的布局来说很不方便，比如垂直居中不容易实现。Flex是FlexibleBox的缩写，意为“弹性布局”，用于为盒模型提供最大的灵活性。1.display:flex/inline-flex说明：flex：将对象显示为弹性框inline-flex：将对象显示为内联块级弹性框，并设置为flex框（添加到父元素）2.flex-direction(主轴的排列方向)说明：顺序指定弹性子元素在父容器中的位置 row默认水平排列成一行。正面。column：垂直排列。column-reverse：反向垂直排列，从下到上，最后一项在最上面3.justify-content(principalalignment)描述：内容对齐(justify-content)属性应用于弹性容器，使弹性项沿弹性容器的主轴。flex-start默认，top对齐flex-end结束对齐center对齐space-between两端对齐，中间自动分配■space-around自动分配距离4.flex-wrap说明：该属性控制flex容器是否是单行或多行，横轴方向决定新行的堆叠方向。nowrap：弹性容器是单行的。在这种情况下，flex子项可能会溢出容器包装：flex容器是多行的。在这种情况下，flex子项的溢出部分将换行，子项内部会发生换行wrap-reverse：反转换行排列。5.align-items(sideaxisalignment)说明：sideaxisalignmentflex-start：弹性盒子元素的侧轴（垂直轴）起始位置的边界靠近线的侧轴起始边界。flex-end：flexbox元素的侧轴（纵轴）起始位置的边缘靠近行的侧轴的结束边缘。center：flexbox元素在行的交叉（垂直）轴上居中。（如果线的尺寸小于flexbox元素的尺寸，它会在两个方向溢出相同的长度）。baseline：如果flexbox元素的内联轴与侧轴相同，这个值相当于'flex-start'。在其他情况下，此值将参与基线对齐。拉伸：默认值。物品被拉伸以适合容器。6.align-content(line-to-linealignment)说明：当flex容器的侧轴有多余空间时，可以使用该属性调整flex容器中“灵活行”的对齐方式，即与调整flex主轴上项目对齐的<'justify-content'>属性类似。请注意，此属性对只有一行的弹性容器没有影响。■flex-start无行间距■flex-end底部对齐无行间距■center居中无行间距■space-between两端对齐，中间自动分布■space-around自动分布距离■stretch默认值。物品被拉伸以适合容器。7.align-self（添加到子元素）说明：align-self属性规定了选中项在柔性容器中的对齐方式。注意：align-self属性覆盖了flex-container的align-items属性。自动是默认值。元素继承其父容器的align-items属性。如果没有父容器，则“拉伸”。拉伸元素被拉伸以适合容器。Center元素位于容器的中心。flex-start元素位于容器的开头。flex-end元素位于容器的末端。8、flex的三个属性值介绍。flex-grow定义item的放大比例，默认为0，即如果有剩余空间，则不放大。flex-shrink定义item的收缩比例，默认为1，即如果空间不足，item会缩小。负值对该属性没有影响。收缩的计算方法：（加上元素宽度收缩率/元素收缩率）*溢出宽度flex-basisitemlength9.flex(flex-grow,flex-shrink,flex-basis)说明：复合属性。设置或获取flexbox模型对象的子元素如何分配空间。缩写为“flex:1”，则其计算值为“11%”缩写为“flex:auto”，则其计算值为“11auto”flex:none，则其计算值为“00auto”flex:0auto”或“flex:initial”，计算出的值为“01auto”，即“flex”的初始值为10，顺序说明：数字排序优先级，数字越大越靠后，默认为0，支持负数。
