flex布局方式的详细阐述（工作中用到特意总结一下）

由于前段工作经常要做一些样式的书写，所以对于这个属性也是经常要使用到的。接下来我就给大家介绍一下这个属性的使用：

flex属性的使用，需要两个部分，容器和容器内的子元素，如下面的例子：

上述代码中box为父元素，子元素就是内部的item元素。

.box{
  display: flex;
}

可以设置我们的父元素为弹性布局的样式，在父元素的属性上我们可以设置如下六个属性：

flex-direction:属性决定主轴的方向（即项目的排列方向）row水平方向 column垂直方向;

flex-wrap:控制是否换行 wrap换行 nowrap不换行;

flex-flow:上述两个属性的集合;

justify-content:定义了项目在主轴上的对齐方式;

align-items:定义项目在交叉轴上如何对齐;

align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用;

对于上述的几个属性，最常用的就是上述两个属性的设置。flex-direction控制方向：

对于flex-wrap的属性的设置：

对于另外几个属性的设置，大家可以百度一下css3.0的属性。不过我用的并不是很多。上面介绍的是对于父容器的设置，对于item子项，也有几个属性，针对他们：

order:定义项目的排列顺序。数值越小，排列越靠前，默认为0;

flex-grow:定义项目的放大比例，默认为0;

flex-shrink:定义了项目的缩小比例，默认为1;

flex-basis:定义了在分配多余空间之前，项目占据的主轴空间（main size）;

flex:属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto;

align-self:属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto;

对于子项的设定，实际情况我用的并不是很多，最多的也就是flex：1，让其平均布局。不过flex弹性布局的方式确实给我们做这种垂直居中或者平分的情况，提供了很好的方式。可能我写的太多简单和粗浅，想了解更详细的，可以查看

点击打开链接 阮一峰写的关于这方面的帖子，写的很详细，也通俗易懂。工作中的一点记录，与大家共勉.......