Flexbox是CSS3的盒模型（boxmodel），顾名思义就是弹性盒（FlexibleBox）。Flexbox模型概念的第一步是看Flexbox的盒子模型。根据W3C文章的描述，flex的盒子模型如下图所示。与一般盒模型不同的是，Flexbox的盒模型有水平起点和终点（mainstart、mainend）、垂直起点和终点（crossstart、crossend）、水平轴和垂直轴（mainaxis,crossaxis),然后元素有水平尺寸和垂直尺寸（mainsize,crosssize），这两个都是很重要的布局概念。Flexbox属性介绍我们先来看看Flexbox的属性：displayflex-directionjustify-contentalign-itemsalign-selfalign-contentflex-wraporderflexdisplaydisplay是一个比较著名的CSS属性。对于Flexbox，还有两种设置方式。Default是“flex”，它的布局方式几乎和block类似，会强制换行，但是display:flex的子元素有更灵活的设置，还有一种方式是“inline-flex”，和inline-block几乎一样，意思是在外面包裹了display:inline属性的display:flex元素，后面的元素不会包裹。CSS:.flex,.inline-flex{宽度:100px;高度：50px；border:1pxsolid#000;}.flex{display:flex;}.inline-flex{display:inline-flex;}flex-directionflex-direction表示Flexbox内容元素的“排列方向”，有以下四种类型。row：默认值，从左到右，从上到下row-reverse：与行相反column：从上到下，然后从左到右column-reverse：与列相反:row;}.flex-row-reverse{flex-direction:row-reverse;}.flex-column{flex-direction:column;}.flex-column-reverse{flex-direction:column-reverse;}证明-contentjustify-content决定内容元素和整个Flexbox的“水平对齐”位置。回想一下，上面提到的Flexbox盒子模型有两个端点，mainstart和mainend。justify-content就是这样设置的。一共有五个设置。flex-start：默认值，对齐到最左边的mainstartflex-end：对齐到最左边的mainendcenter：水平居中space-between：内容元素均匀分布，左右元素会与mainstart和main对齐endspace-around:内容元素均匀分布，间距也均匀分布CSS:.flex-start{justify-content:flex-start;}.flex-end{justify-content:flex-end;}.center{justify-content:center;}.space-between{justify-content:space-between;}.space-around{justify-content:space-around;}align-itemsalign-items正好与justify-content相反,align-items决定了内容元素和整个Flexbox的“垂直对齐”位置的“垂直对齐”位置，再回忆一下上面提到的Flexbox盒子模型，它有两个端点，crossstart和crossend，align-items和align-self就是这样设置的。总的设定值如下五个。flex-start：对齐顶部交叉起点flex-end：对齐底部交叉endcenter：垂直居中stretch：默认值，将所有内容元素拉伸到Flexbox的高度baseline：使用所有内容元素的基线作为对齐标准CSS：.flex-start{align-items:flex-start;}.flex-end{align-items:flex-end;}.center{align-items:center;}.stretch{align-items:stretch;}.基线{对齐项目：基线；}.flex-item{宽度：60px；text-align:center;}.item1{字体大小:20px;行高：60px；背景：#c00；}.item2{行高：30px；背景：#095;}.item3{字体大小：30px;行高：100px；background:#059;}align-selfalign-self的设置和align-items一样，但是目的不同，align-self的作用是覆盖align-items已经应用的属性。如果我们之前这样写，因为align-items是针对所有子元素的，所以必须用align-self覆盖。让我们直接使用前面的示例。修改很清楚。CSS:.item2{对齐自我：基线；行高：30px；background:#095;}align-content刚才说的align-items是针对单行元素的，如果遇到多行元素，就要用到属性align-content，一共有六个设置值。flex-start:顶部交叉对齐flex-end:底部交叉对齐endcenter:垂直居中space-between:分别对齐第一行和最后一行topandbottomspace-around:每行分配间距均匀拉伸：默认值，所有内容元素都被拉伸CSS:.flex-start,.flex-end,.center,.space-between,.space-around,.stretch{弹性包装：包装；宽度：180px；高度：160px；边距：5px5px40px；边框：1px实心#000；vertical-align:top;}.flex-start{align-content:flex-start;}.flex-end{align-content:flex-end;}.center{align-content:center;}.space-between{align-content:space-between;}.space-around{align-content:space-around;}.stretch{align-content:stretch;}.align-content>div{padding:15px;边距：2px；background:#666;}flex-wrap在刚才的例子中，看到了一个flex-wrap属性，它负责让内容元素换行，因为当我们设置父元素的显示为flex或者inline-flex，子元素在单行中，弹性填充父元素，所以我们需要使用flex-wrap来换行，一共有三个设置值。nowrap:默认值，单行wrap:多行wrap-reverse:多行，但内容元素是反转的CSS:.nowrap,.wrap,.wrap-reverse{display:inline-flex;弹性包装：包装；宽度：180px；高度：80px；边距：5px5px40px；边框：1px实心#000；vertical-align:top;}.column{flex-direction:column;宽度：120px；:nowrap;}.wrap{flex-wrap:wrap;}.wrap-reverse{flex-wrap:wrap-reverse;}.align-contentdiv{width:30px;高度：30px；边距：5px；background:#069;}.columndiv{background:#f50;}order刚才在flex-wrap属性中看到可以将元素倒转，order属性可以直接指定一个数字，从小到大排列顺序。.item{宽度：50px;高度：60px；文本对齐：居中；行高：50px；}.order1{订单：1;背景：#c00；}.order2{顺序：2；背景：#069；.order3{订单：3;背景：#095；}.order4{顺序：4；背景：#f50；}.order5{顺序：5；背景：#777；}.order6{顺序：6；背景：#077;}弹性非常好，酒会沉到瓮底。只有你有耐心看完下面才会看到重点哈哈！Flex应该是Flexbox中最重要的属性了，而flex其实是由三个属性组成的，依次是“flex-grow”、“flex-shrink”、“flex-basis”。如果flex只填入一个值（不带单位），那么默认是以flex-grow的形式呈现。三个属性的解释如下：flex-grow：数字，无单位，当子元素的flex-basis长度比它“小”时，父元素中自己分配的长度根据相应的分配“拉伸”比例根据数量。默认值为0，不做弹性变化，不能为负。如果设置为1，将执行弹性更改。flex-shrink:数字，无单位，当子元素的flex-basis长度“大于”自身分配给父元素的长度时，根据数字分配相应的“压缩”比例，默认值为1,set为0则不进行弹性变化，不能为负值。flex-basis：子元素的基本尺寸，作为父元素的尺寸比较基准，默认值为0，并且因为默认值为0，当不设置该属性时，flex-grow属性会直接使用，flex-basis也可以设置为auto。如果设置为auto，则表示子元素基于自身的基本尺寸。三个属性可以单独设置，也可以和一个flex一起设置。以下示例显示了相同的Flexbox。在不同的宽度下，子元素会以不同的尺寸呈现。HTML：
