十分钟彻底掌握CSSFlex布局

.container{显示：flex|inline-flex;}这里有两种设置flex布局的方式，使用display:flex;会生成一个blockflexcontainerbox，使用display:inline-flex;会生成一个inlineflexcontainerbox。如果我们使用块元素，比如div标签，我们可以使用flex，如果我们使用行内元素，我们可以使用inline-flex。在大多数情况下，我们会使用display:flex;。父元素（容器）可以设置如下六个属性：flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content1，flex-directionflex-direction：主轴方向，决定了元素排列的方向容器，它有四个属性值：.container{flex-direction:row|行反转|栏目|column-reverse;}(1)flex-direction:row：默认值，沿水平主轴从左到右排列，从左边缘开始。(2)flex-direction:row-reverse：沿水平轴从右向左排列，从右边缘开始。(3)flex-direction:column：沿垂直轴从上到下排列，起点在上边缘。(4)flex-direction:column-reverse：沿垂直轴从下往上排列，从底边开始。2.flex-wrapflex-wrap：容器中的元素是否可以换行，它有三个属性值：.container{flex-wrap:nowrap|包装|wrap-reverse;}(1)flex-wrap:nowrap:默认值，不换行。当主轴长度固定，空间不够时，itemsize会相应调整，不换行。(2)flex-wrap:wrap:换行符，第一行在上面(3)flex-wrap:wrap-reverse:换行符，第一行在下面。3.flex-flowflex-flow是flex-directionattribute和flex-wrapattribute的简写，默认是：flex-flow:rownowrap，用处不大，最好分开写。该属性的写法如下：.container{flex-flow:;}4.justify-contentjustify-content：元素在主轴上的对齐方式，有五种属性值：.container{justify-content:flex-start|弹性端|中心|间隔|space-around;}这里以水平方向为主轴为例，即flex-direction:row。(1)justify-content:flex-start:默认值，元素在主轴上左对齐（顶对齐）。(2)Justify-content:flex-end：元素在主轴上右对齐（下对齐）。(3)justify-content:center:元素在主轴上居中。(4)justify-content:space-between:元素在主轴两端对齐，元素之间的间距相等（5）justify-content:space-around：每一项两边的间距相等。因此，项目之间的间距是项目与边框之间的间距的两倍。5.align-itemsalign-item：元素在横轴上的对齐方式，有五个属性值：.container{align-items:flex-start|弹性端|中心|基线|stretch;}这里在水平方向以主轴为例，即flex-direction:row。(1)align-item:flex-start：横轴起点对齐（上方或左侧）。设置container高度为100px，item高度分别设置为20px、40px、60px、80px、100px，如图：(2)align-item:flex-end:对齐横轴的末端（下图）或正确）。将容器的高度设置为100px，将项目的高度分别设置为20px、40px、60px、80px和100px。效果如图：(3)align-item:center：对齐到横轴的中点。将容器的高度设置为100px，将项目的高度分别设置为20px、40px、60px、80px和100px。效果如图：(4)align-item:stretch:默认值，如果元素没有设置高度或者设置为auto，会占满容器的全高。假设容器的高度设置为100px，但是没有设置item的高度，那么item的高度也是100px：(5)align-item:baseline：与第一行文本的基线对齐6.、align-content元素的align-content：多根轴对齐。如果元素只有一个轴，则此属性无效。它有六个属性值：.container{align-content:flex-start|弹性端|中心|间隔|环绕空间|stretch;}那么如何确定轴数呢？其实这主要是由flex-wrap属性决定的。当flex-wrap设置为nowrap时，容器中只有一个轴，因为item不会换行，不会有多个轴。当flex-wrap设置为wrap时，容器中可能有多个轴。在这种情况下，需要设置多个轴之间的对齐方式。这里以水平方向为主轴为例，即：flex-direction:row;弹性包装：包装；(1)align-content:stretch：默认值，轴占据整个横轴。这里我们先给每个item设置一个固定的宽度，效果如下：下面会去掉每个item的高度，会占据整个横轴，效果如下：(2)align-content:flex-start：从横轴位置padding开始。(3)align-content:flex-end：从横轴的结束位置开始填充。(4)align-content:center：与横轴的中点对齐。(5)align-content:space-between：与横轴两端对齐，横轴前的间隔均匀分布。(6)align-content:space-around：每条轴两边的间隔相等。因此，轴之间的距离是轴与框架之间的距离的两倍。item属性子元素有如下六个属性：orderflex-growflex-shrinkflex-basisflexalign-self1，orderorder属性用于定义item的顺序。值越小，排名越高，默认为0。使用形式如下：.item{order:;}2.flex-basisflex-basis属性定义了所占用的主轴空间分配多余空间前的item，浏览器会根据该属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。使用形式如下：.item{flex-basis:|auto;}当主轴设置为水平时，设置flex-basis时，设置的item宽度值会失效，flex-basis需要跟在flex-grow后面，只有配合使用才生效有弹性收缩。有两个特殊值：当flex-basis值为0%时，项目大小将被视为0，因此无论项目大小设置如何都会使用；当flex-basis值为auto时，它会跟随size设置值来设置尺寸。3.flex-growflex-grow属性定义了item的放大比例，默认为0，即有剩余空间则不放大。当容器中的所有项都设置了flex-basis属性后，如果还有剩余空间，设置的flex-grow属性就会生效。如果所有item的flex-grow属性都设置为1，那么它们将平分剩余空间，如下图所示：如果其中一个item的flex-grow属性设置为2，其他为1，那么它占用剩余空间的空间是其他item的两倍，如下图：4.flex-shrinkflex-shrink属性定义了item的收缩比例，默认为1，即如果空间不足，物品会收缩。不能设置负值，使用形式如下：.item{flex-shrink:;}如果所有item的flex-shrink属性都为1，当空间不足时，它们会按比例收缩缩小，如下图：如果一个item的flex-shrink属性为0，其他item为1，当空间不足时，前者不会收缩，如下图：5.flexflex属性是flex-grow,flex-shrink和flex-basis的简写，最后两个属性是可选的。默认值为：flex:01自动。使用形式如下：.item{flex:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}flex的取值有几种常用的特例：(1)默认值：flex:01auto，即有剩余空间时只放大不缩小。.item{flex:01auto;}.item{flex-grow:0;伸缩收缩：1；flex-basis:auto;}(2)flex:none，即有剩余空间时，既不放大也不收缩，最终大小通常表示为最大内容宽度。.item{flex:00auto;}.item{flex-grow:0;伸缩收缩：0；flex-basis:auto;}(3)flex:0，即当有剩余空间时，item的宽度为content的宽度，最终的size表示为content的最小宽度。.item{flex:010%;}.item{flex-grow:0;伸缩收缩：1；flex-basis:0%;}(4)flex:auto，即元素大小可以弹性增加，也可以弹性变小，完全弹性，但当大小不足时，会优先最大化内容大小。.item{flex:11auto;}.item{flex-grow:1;伸缩收缩：1；flex-basis:auto;}(5)flex:1，即元素的尺寸可以弹性增加或灵活变小，完全灵活，但在尺寸不足时优先考虑最小化内容尺寸。.item{flex:110%;}.item{flex-grow:1;伸缩收缩：1；flex-basis:0%;}6.align-selfalign-self属性允许单个项目与其他项目对齐不同的对齐方式可以覆盖align-items属性。默认值为auto，即继承父元素的align-items属性。如果没有父元素，相当于stretch。.item{对齐自我：自动|弹性启动|弹性端|中心|基线|stretch;}该属性与align-items属性的作用相同，只是该属性只对单个项生效，而align-items对容器中的所有项都有效。设置容器的align-items属性为flex-start，容器中第三项的align-self属性为flex-end，效果如下：