大家好，我是小雅！

又到了写文章的时候了，一天一天真快，你们的支持是我持续创作的动力。

之前写过关于flex弹性盒子的概念以前它的便利性，简单总结下就是，它是为了更好的解决复杂的布局而诞生的。先列出关于flex盒子的所有属性如下：

flex属性设置

flex-direction 该属性的意思是决定了容器中元素的排列方向，比如是一行显示还是换行显示

例如我们想把几个块级元素全部排列在同一行显示，用这个属性该怎么设置呢？这里就要提到它的第一个属性值：row。row有行的意思，顾名思义就是其内部所有的子元素全部在一行显示。如下图：

flex-direction: row;

还有一个属性：column。它是列的意思，也就是说当前容器中的所有元素都以列的形式显示，如下图：

flex-direction: column;

上面图中的显示赛事代码如下：

代码示例

为什么要写上面的效果呢？因为正好可以用到flex其它两个属性，flex,justify-content。

flex属性

当你声明了一个容器之后，设置了flex属性值，就会有不同的效果，这里详细说一下关于flex属性值的意思与应用。首先flex首发是flex-grow、flex-shrink、flex-basis的缩写，也就是说这三个属性的值可以同时设置在flex属性一个人身上。flex-grow的意思是扩展容器内元素所占大小的比率，这样说可能很难理解，通俗的讲就是，如果你在一个容器中的其中一个元素上设置了该属性，那么该元素的大小就是其它元素的倍数，比如flex-grow: 3，意思是它的占据空间大小是其它元素的3倍。flex-shrink的意思，直接通俗的讲就是当容器内元素的值大于了容器的大小时，会按照一定的比例去分配到每一个元素中去，这个比例的设置就是该属性的值，默认是1，也就是自动会计算，这么去理解就可以了。flex-basis的意思呢，最简单的理解就是它是用来设置当前元素的初始值，比如上面代码中多个item，任意一个设置了该值后都会有默认值。那么我这里的例子是flex:1;意思是将三个属性都用数字来赋值，此时容器内所有的元素都按照同等比例分配容器空间，所以你会看到上图中的item都是一样的大小，不管他们是以行的形式显示还是列的形式。

属性兼容

align-items独立

这是最常用的属性之一，它的意思是用来控制容器中元素的上下对齐方式。这个没有什么别的好说的，很好理解，直接上效果图。

center属性值

此属性常用的值有：center,flex-start,flex-end。分别意思是上下居中，居上，居下，很好理解。其它属性用法也是一样，相关属性值就不一一列举了，主要是写出来如何使用它。有了关于flex容器的知识，你可以很轻易的写出一个漂亮的块级元素，并且可以在其内部以各种方式排列子元素。

我是小雅，欢迎关注我的分享，施舍一个赞吧！