来一波css3伸缩盒 flex使用教程，欢迎来指点

sky_cj666

去年接触apiclound 在写页面的时候碰到过很多坑。请教过很多人，也得到过很多前辈的指点。长期以来一直汲取论坛上前辈的经验，今天发布一篇小的使flex用教程，来同大家一起交流学习。表达自己不忘互联网的精神---分享。———————————————————————————————————————————————————我是分割线
首先来说明一下目前还有的坑，使用flex目前来说，首先第一点就是兼容问题，目前支持最好的当属chrome浏览器，在android上面的话，基本不会出现问题。IOS上面9.0及以上和android手机是一样的 效果，没有兼容问题。9.0一下会碰到很多没见过的麻烦。楼主使用至今也没搞明白是为什么，所以在更贴中欢迎大家来分享遇到的问题和解决办法。
——————————————————————————————————————————————————————————————————
我已经写好样式类名和说明了，在附件中可查看详细说明。使用很简单。

.flex /*定义为伸缩盒*/ 写法为<div class="flex" style="height:100%"></div>。此处需要注意，伸缩盒必须要有一个高度定义，否则父层元素没有高度，则无法自动计算子元素的高度，我没有写在.flex样式里面是因为每个页面只有一个外层，而我的布局中会包含很多的flex盒子。所以只需要在最外层的盒子写个style就可以了 其他的就都不需要加了。而且我不知都加上height:100%会出现个什么问题。反正为了保险起见就是直接写在代码中的。而且代码不多，就几个字。嘿嘿嘿

.flex_column /*更改伸缩盒方向，纵向的伸缩盒*/     代码示例：<div class="flex flex_column"  style="height:100%"></div>


.flex_row /*横向的伸缩盒 装不下的时候不换行*/   代码示例：<div class="flex flex_row"  style="height:100%"></div>


.flex_ctn_center /*伸缩盒中的元素垂直居中*/  示例代码：<div class="flex flex_row flex_ctn_center"  style="height:100%"></div>,目前最优雅的解决绝对居中的样式写法，超级好用。楼主最爱的解决方式，
.flex_ctn_space_between  /*伸缩盒中的元素按等份排列；两端没有间隔*/

.flex_ctn_around_center /*伸缩盒中的元素按等份排列，两端有间隔*/

.flex_ctn_end  /*伸缩盒中的元素按倒序排列*/

.flex_ctn_start /*伸缩盒元素排列按正常顺序排列*/

.flex_column_reverse /*伸缩盒中的纵向元素顺序颠倒*/

.flex_row_reverse /*伸缩盒中的横向元素顺序颠倒*/

.content1 到.content15 /*给伸缩盒中的元素添比例分配大小；大小为总数的几等份*/ 楼主已经默认设定了15个可直接选择的等分
===========================================================================接下来就是2个简单的示例啦 ，简单粗暴，通俗易懂
假如在页面上我想要把页面分成一个三等分的垂直的空间，我们直接将样式引入之后，写上一下代码
——————————————————————————————————————————————————————
                          <div class="flex flex_column"  style="height:100%">//定义为一个垂直的盒子，并且盒子里面有三个子元素，                                        <div class="content1 flex">1</div>//子元素又是一个伸缩盒，这样无限套用下去，就完成了复杂的布局了。
                                        <div class="content1 flex">2</div>
                                        <div class="content1 flex">3</div>
                                </div>
如果我想要一个1.2.1比例的布局呢 ，我们直接将中见的div的comtent1 改成content2 就好啦，这样分布的就是1,2,1比例的大小啦
——————————————————————————————————————————————————————
同理我们想要一个三等分的横向的盒子
        <div class="flex flex_row"  style="height:100%">//定义为一个垂直的盒子，并且盒子里面有三个子元素，                                        <div class="content1 flex">1</div>//子元素又是一个伸缩盒，这样无限套用下去，就完成了复杂的布局了。
                                        <div class="content1 flex">2</div>
                                        <div class="content1 flex">3</div>
                                </div>

完美解决。
——————————————————————————————
我们想要怎么控制，在class中加上上述说明的样式名就OK啦。当然，这个小教程还有很多东西没有说到。希望大家能够充分发挥，积极找答案了，这里只是作为一个引路的方向
                        

sky_cj666

样式源码已经在sublime 2中 经过Autoprefix插件 自动匹配过兼容样式了。有没有做到的大家可以积极讨论，楼主也属于新手，所有解决不了的问题，也没有办法说清楚，但是教程 我觉得就是要简单粗暴，容易上手

lcj231700764

nice啊~~

et998114

66666666666666666

aTiger

收藏了

liuxingyun20131

sky_cj666 发表于 2016-3-16 11:59
样式源码已经在sublime 2中 经过Autoprefix插件 自动匹配过兼容样式了。有没有做到的大家可以积极讨论，楼 ...

Autoprefix 自动生成出来的flex，在安卓上面有问题的，那个不可信

sky_cj666

liuxingyun20131 发表于 2016-3-16 12:49
Autoprefix 自动生成出来的flex，在安卓上面有问题的，那个不可信

请问如何有什么好的方法呢

lcj231700764

sky_cj666 发表于 2016-3-16 12:51
请问如何有什么好的方法呢

需要补充以前版本的box，因为以前的手机内置浏览器并不支持最新的flex

而最早的box 可以实现的效果又和现在的flex有少许区别

zz123x2012

收藏。。。。。。