标签：
CSS3中引入了另一种框--flexbox，flexbox有一些block和inline不同的性质，比如：
现在就大体讲述下这个具体属性的表示含义。
将一个容器设置为flexbox（又称伸缩容器）很简单，但是却存在一些兼容性的问题，比如在IE10下，早期的webkit系列中，都与标准有一些差异，但是我们可以通过less预处理器避免手动输入这些重复的代码。
.flexbox() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
flex-flow设置flex流的方向（主轴的方向）以及伸缩项目如何换行，具体对应的属性是flex-direction和flex-wrap。flex-direction设置main-axis（主轴）的方向，可选参数为row，row-reverse，column,column-reverse，顾名思义，当方向为row时，伸缩项目横向排列，若此时所有伸缩项目的宽度已经超出了伸缩容器的宽度，浏览器就需要根据flex-wrap属性来布局。若flex-wrap：wrap，则换行放置，若为flex-wrap：nowrap，则所有伸缩项目放在同一行内。
flex-flow是这两个属性的结合，设置方式为flex-flow： row wrap；
justify-content用来设置伸缩项目在主轴上的排列方式。justify-content有一些参数：flex-start、flex-end、center、space-between、space-around。具体的区别可以通过测试可知。
该属性设置伸缩项目在侧轴（垂直于主轴方向）方向如何放置。和justify-content类似，可以取flex-start，center，flex-end和stretch属性。stretch可以将所有的伸缩项目拉伸至等高高度，并充满伸缩容器。
order属性可以改变伸缩项目的显示顺序，可以方便的修改布局的相对位置。order值越小，布局位置越靠前。order也有兼容性的问题，可以在less下这样设置
.order(@val) { -webkit-box-ordinal-group: @val; -moz-box-ordinal-group: @val; -ms-flex-order: @val; -webkit-order: @val; order: @val; }
flex是一个综合属性设置，包括了flex-grow、flex-shrink、flex-basis。
flex也有一些缩写值，如flex：auto和flex：initial。其中，flex：auto === flex：1 1 auto；flex：initial === flex： 1 0 auto；当flex-basis设置为0时，意味着将按照flex-grow的比例分配所有空间。
flex属性也有兼容性问题，依然使用less解决：
.flex(@flex-grow,@flex-shrunk,@flex-basis) { -webkit-box-flex: @arguments; -moz-box-flex: @arguments; -webkit-flex: @arguments; -ms-flex: @arguments; flex: @arguments; }
现在使用h5标签构建一个响应式布局，使用flex模型和媒体查询。
.flexbox() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .flex(@flex-grow,@flex-shrunk,@flex-basis) { -webkit-box-flex: @arguments; -moz-box-flex: @arguments; -webkit-flex: @arguments; -ms-flex: @arguments; flex: @arguments; } .order(@val) { -webkit-box-ordinal-group: @val; -moz-box-ordinal-group: @val; -ms-flex-order: @val; -webkit-order: @val; order: @val; } html{ -webkit-text-size-adjust:none; font-size: 10px; } .wrapper{ background: tomato; .flexbox; flex-flow: row wrap; } .main-header{ .flex(1,1,100%); font-weight: bold; font-size: 40px; color:#ffffff; text-align: center; height:100px; line-height: 100px; background: blueviolet; } .main-content{ .flex(2,1,60%); width:60%; font-size: 14px; .order(2); height:300px; background: #ffffff; line-height:20px; } .nav{ .flex(1,1,20%); width:20%; .order(1); background: greenyellow; ul{ list-style: none; margin:0; padding:0; overflow: hidden; background: deepskyblue; li{ float: left; width:100%; padding: 10px; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.1); text-align: center; height: 100%; &:hover{ background: darken(deepskyblue, 2%); } a{ text-decoration: none; color: #ffffff; font-size: 14px; display: block; height: 100%; cursor: pointer; } } } } .sec{ .flex(1,1,20%); width:20%; .order(3); font-weight: bold; font-size: 40px; color:#ffffff; text-align: center; background: #000000; } .main-footer{ .flex(1,1,100%); .order(4); font-weight: bold; font-size: 40px; color:#ffffff; text-align: center; background: violet; height:100px; line-height: 100px; } @media screen and (max-width : 600px){ .nav{ .flex(1,1,40%); width:40%; .order(1); } .main-content{ .flex(2,1,60%); width:60%; .order(2); } .sec{ .flex(1,1,100%); .order(3); } }
<div class="wrapper">
<header class="main-header">header</header>
<div class="main-content">
<p>伸缩容器：一个设有“display:flex”或“display:inline-flex”的元素
伸缩项目：伸缩容器的子元素
主轴、主轴方向：用户代理沿着一个伸缩容器的主轴配置伸缩项目，主轴是主轴方向的延伸。
主轴起点、主轴终点：伸缩项目的配置从容器的主轴起点边开始，往主轴终点边结束。
主轴长度、主轴长度属性：伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度，伸缩项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。
侧轴、侧轴方向：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
侧轴起点、侧轴终点：填满项目的伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
侧轴长度、侧轴长度属性：伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是「width」或「height」属性，由哪一个对着侧轴方向决定。</p>
</div>
<nav class="nav">
<ul>
<li><a href="javascript:void 0;">home</a></li>
<li><a href="javascript:void 0;">help</a></li>
<li><a href="javascript:void 0;">find</a></li>
<li><a href="javascript:void 0;">search</a></li>
</ul>
</nav>
<section class="sec">
section
</section>
<footer class="main-footer">footer</footer>
</div>
标签：
原文地址：http://www.cnblogs.com/accordion/p/4326017.html
