这篇文章的内容主要是关于flex布局的应用和属性。
首先，我来介绍一下flex布局的产生。
一般情况下，当我们对一部分内容进行布局的时候，会使用盒模型。常见的布局手段即是结合padding与margin设置元素的display、float和position。但是这三种方法在设置元素位置的时候，有时会不够准确并且使css语句过多。在这种情况下就可以引入flex布局。 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，2009年，W3C提出了Flex布局。目前，它已经得到了所有浏览器的支持。
这一布局方式的应用比较广泛，无论是块级元素还是行内元素都可以使用。但是这一布局方式同样有一定的缺陷，由于近些年W3C规范的多次更新，目前浏览器在支持flex布局的方面有一些差异，一些旧版浏览器也无法很好的支持flex布局。所以在使用flex布局的时候，需要注意兼容性，一般来说要加入
.box{
display: -webkit-flex; /* Safari */
display: -ms-flexbox; /*ie 10*/
display: flex;
}
webkit内核的浏览器（如Safari）和ie10及以下的浏览器，都需通过这种方式进行兼容。
在一个flex盒中，一般情况下按照两条轴的方向进行元素布局。水平方向的轴是主轴，竖直方向的轴是交叉轴。默认情况下，元素排布从左至右，从上至下。但是有时在实际应用中，并不按照默认情况进行排布，这时就可以设置flex盒的第一种属性：flex-direction。
flex-direction设置的是元素的按哪个轴方向进行排布。默认的是row（从左至右），除此之外，可以设置成column（从上至下）。如果需要设置成反向，则在后面加上“-reverse”。
解决了元素的排布方向，接下来是元素的对齐方式。
justify-content属性规定了元素在主轴上的对齐方式，默认的是flex-start（左对齐），同样也可以设置成flex-end（右对齐）和center（居中），但同样也可以设置成space-between（两端对齐，且让剩余空间均匀的分布在每两个元素之间）或是flex-around（剩余空间均匀包裹每一个元素，每两个元素之间的间距是边框距盒内元素距离的二倍）。
align-items属性规定了元素在交叉轴上的对齐方式。默认是stretch，即元素在竖直方向上充满整个空间。可以设置成flex-start（起点对齐）、flex-end（终点对齐）和center（居中），除此之外，可以使用baseline对齐，即元素内部第一行文字的基线对齐。
当flex盒内元素具有多条轴的时候，可以使用align-content属性。默认的是stretch，即轴线占满整个交叉轴。除此之外，还有flex-start（与交叉轴的起点对齐），flex-end（与交叉轴的终点对齐），center（竖直居中），和space-between以及space-around。
最后，还有三个可以进行连写的属性，即flex-grow, flex-shrink, flex-basis。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为flex: 0 1 auto。
这一属性有两个快捷应用，即flex：auto和flex：none。当在一个flex盒中进行布局的时候，有可能面临元素过多，不能简洁的让元素充满整个空间的情况。所以，引入这两个元素进行设置。auto是指有剩余空间的时候，该元素将放大，而空间不足的时候，该元素会缩小；而none则是使元素保持默认大小，既不放大，也不压缩。
还有相关的讲解视频https://v.qq.com/x/page/i05020ec6cw.html和PPT地址https://ptteng.github.io/PPT/PPT/css-69-flexbox.html#/以供参考。
网友评论