web前端：对于flex布局的使用心得

　　Flex是一个高效、免费的开源框架，可用于构建具有表现力的web应用程序，这些应用程序利用AdobeFlashPlayer和AdobeAIR,可以实现跨浏览器、桌面和操作系统。

　　弹性盒子flex：

　　对于客户端的布局非常有用，不管是平均分配space-around这个属性还是两端对齐space-betwee在页面布局的时候都会有很好的表现。

　　对于部分内容区域中，具有很多大致内容相同的几个区块的布局都可以使用到它，将父级设置为display:flex；父级就会变成容器，子级就会变成项目，项目默认是在一行显示，如果项目的宽度总和大于父级的总和了，子级就会缩放在一行显示。

　　因此换行是需要自己设置的。我平时划分的区块是比较细的，因此用到换行的情况是内容相似而且比较多的。

　　换行的书写方式为：flex-wrap:wrap默认值为nowrap。

　　当换行过后交叉轴就会变成多根，在一根交叉轴的对齐方式使用的是align-items，当使用了换行过后对应的交叉轴对齐方式属性应当书写为align-content。

　　在使用中遇到一个难以解决的问题，想做一个骰子五的样式，但是中间那个区块没法下去，代码如下：

　　html中代码如下：

　　<divclass="father">

　　<divclass="first"></div>

　　<divclass="second"></div>

　　<divclass="third"></div>

　　<divclass="fourth"></div>

　　<divclass="fifth"></div>

　　</div>

　　css中代码如下：

　　.father{

　　height:320px;

　　width:320px;

　　margin:0auto;

　　display:flex;

　　box-sizing:border-box;

　　border:solid1pxred;

　　justify-content:space-between;

　　flex-wrap:wrap;

　　align-content:space-between;

　　}

　　每个盒子我给了一个背景颜色，因为代码都是重复的就不写了。

　　.father>div{

　　width:100px;

　　height:100px;

　　}

　　.second{

　　align-self:center!important;

　　}

　　此问题我无法解决，但是因为平时的开发中也用不到这样的布局因此也没有特别去纠结。

　　对于属性flex-direction，可以改变主轴的对齐方式，可以从左到右，从右到左，也可以从上到下，从下到上。根据自己的需求也是挺好用的。

　　flex-direction与flex-wrap可以简写为flex-flow：既可以设置换行也可以设置主轴的对齐方式，可以写单个值也可以两个值一起写。

　　综上所述在之前的开发当中因为float浮动的使用非常麻烦因为每次设置了浮动过后都要清浮动，否则的话浮动元素不会计入常规流的计算，那么在下方的常规流内容区块就会往上顶，所以就非常的麻烦，因此flex的布局就体现出了非常方便的优点，比如我想让内容去正中间只需要两条语句即可，也不需要一点一点的调margin。

　　虽然只能使用Flex框架构建Flex应用程序，但AdobeFlashBuilder™(之前称为AdobeFlexBuilder™)软件可以通过智能编码、交互式遍历调试以及可视设计用户界面布局等功能加快开发。