1.什么是flexbox？Flexbox是CSS3的一种新的布局方式。CSS3弹性框（FlexibleBox或flexbox），是一种布局方法，当页面需要适应不同的屏幕尺寸和设备类型时，确保元素的正确行为。2.FlexibleBox的使用详解-FlexibleContainer(ParentElement)属性FlexibleBox由一个灵活的容器(parentelement)和一个灵活的子元素(item)组成。通过将display属性设置为flex或inline-flex，将flex容器（父元素）定义为flex容器。弹性容器（父元素）包含一个或多个弹性子元素。可以为柔性容器（父元素）设置的属性有：flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content2.1flex-direction属性主轴（即物品的排列方向）.box{flex-direction:row|行反转|栏目|列反转；}它可能有4个值。row（默认）：主轴是水平的，起点在左端。row-reverse：主轴水平，起点在右端。column：主轴垂直，起点为上边缘。column-reverse：主轴垂直，起点在底部。2.2flex-wrap属性默认情况下，项目排列在一条线上（也称为“轴”）。flex-wrap属性定义了轴线不适合时如何换行。.box{flex-wrap:nowrap|包装|wrap-reverse;}它可能需要三个值。(1)nowrap（默认）：不换行。(2)wrap：换行，第一行在最上面。(3)wrap-reverse：换行，第一行在下面。2.3flex-flowflex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap。.box{flex-flow:||;}2.4justify-content属性justify-content属性定义项目在主轴上的对齐方式。.box{justify-content:flex-start|弹性端|中心|间隔|space-around;}可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴是从左到右。flex-start（默认）：左对齐flex-end：右对齐center：居中space-between：两端对齐，项目之间的间距相等。space-around：每个项目两边的间距相等。因此，项目之间的间距是项目与边框之间的间距的两倍。2.5align-items属性align-items属性定义项目如何在交叉轴上对齐。.box{对齐项目：flex-start|弹性端|中心|基线|stretch;}它可能需要5个值。具体对齐方式与横轴的方向有关，以下假设横轴为自上而下。flex-start：横轴起点对齐。flex-end：横轴末端对齐。center：横轴的中点对齐。baseline：项目中第一行文本的基线对齐方式。stretch（默认）：如果item没有设置高度或者设置为auto，它会占据整个容器的高度。2.6align-content属性align-content属性定义了多个轴的对齐方式。如果项目只有一个轴，则此属性无效。.box{对齐内容：flex-start|弹性端|中心|间隔|环绕空间|stretch;}这个属性可能有6个值。flex-start：对齐横轴的起点。flex-end：与交叉轴的末端对齐。center：与横轴的中点对齐。space-between：与横轴两端对齐，轴与轴之间的间隔均匀分布。space-around：每个轴两边的间距相等。因此，轴之间的距离是轴与框架之间的距离的两倍。stretch（默认）：轴填充整个交叉轴。3.item（子元素）的属性在item上设置了以下6个属性。orderflex-growflex-shrinkflex-basisflexalign-self3.1order属性order属性定义项目的排列顺序。值越小，排名越高，默认为0。.item{order:;}3.2flex-grow属性flex-grow属性定义了item的放大比例，默认为0，也就是说，如果还有剩余空间，则不会放大。.item{弹性增长：;/*default0*/}如果所有项目的flex-grow属性都为1，它们将平分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，而其他项目的flex-grow为1，则前者将占用其他项目两倍的剩余空间。3.3flex-shrink属性flex-shrink属性定义了item的缩小比例，默认为1，即空间不足时，item会收缩。.item{弹性收缩：;/*default1*/}如果所有item的flex-shrink属性都为1，当空间不足时，会按比例缩小。如果一个item的flex-shrink属性为0，其他item为1，前者在空间不足时不会收缩。负值对该属性没有影响。3.4flex-basis属性flex-basis属性定义了在分配多余空间之前item占用的主轴空间（mainsize）。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。.item{弹性基础：|汽车;/*defaultauto*/}可以设置为与width或height属性相同的值（比如350px），那么item会占据一个固定的空间。3.5flex属性flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为01auto。最后两个属性是可选的。.item{flex:无|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}这个属性有两个快捷键值：auto(11auto)和none(00auto)。建议先使用这个属性，而不是分别写三个单独的属性，因为浏览器会计算相关的值。3.6align-self属性align-self属性允许单个项目与其他项目具有不同的对齐方式，并且可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，相当于stretch。.item{对齐自我：自动|弹性启动|弹性端|中心|基线|stretch;}这个属性可能取6个值，除了auto，其他的和align-items属性完全一样。码字不易，点个赞好吗？支持相关推荐：JS正则表达式（要求同时包含数字和字母，长度在6到20之间）jquery操作风格jq修改添加css风格和class风格关于Java的三种随机数生成方式介绍仿京东验证码效果代码java可以对map的keys进行排序java中常见的锁有哪些？java面试题中最容易出错的8道题阅读原文
