今天小编跟大家讲解下有关基础的CSS3弹性盒Flexbox布局使用实例 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关基础的CSS3弹性盒Flexbox布局使用实例 的相关资料，希望小伙伴们看了有所帮助。
flexbox是一个新的盒子模型，当你给一个元素使用了flexbox模块，那么它的子元素就会指定的方向在水平或者纵向方向排列。这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间。flexbox有许多很好用的地方，下面就着重讲述一下它的一些使用场景：Example 1： flexbox等分布局 如果你要实现以下所示的样式，你可能首先想到的是用float：
CSS Code复制内容到剪贴板 <ulid="ranktop3"> <li> <divclass="ranktab">1</div> <p>fdeg</p> <p>霸气值：170</p> </li> <li> <divclass="ranktab">2</div> <p>bling</p> <p>霸气值：160</p> </li> <li> <divclass="ranktab">3</div> <p>lea</p> <p>霸气值：150</p> </li> </ul> ulli{ width:32.9%; float:left; border-right:1pxsolid#fa9900; padding:5px0; }但当只有2个排名后，少了一个li节点后，就会展示如下：
删除两个li节点后如下：
但是用户以及设计师肯定不希望看到这样的界面。他们肯定希望界面是这样的：减少一个li节点后：
删除两个li节点后如下：
那么这里用display:flex布局是最好不过的了，新的flexbox布局模式被用来重新定义CSS中的布局方式：
CSS Code复制内容到剪贴板 ul{ display:flex;//表示改直接子元素用flex布局，默认横向布局 } ulli{ border-right:1pxsolid#fa9900; padding:5px0; flex:1;表示子元素之间平均分配 }可见用flex布局非常完美，这就是flex布局的牛逼之处。很遗憾的是最近规范变动过多，导致各个浏览器对它的实现也有所不同。为了兼容更多的浏览器，也可以这样写：
display: flex;display: -webkit-box;这两个属性的方法作用相同。Example 2： flexbox不等分布局
CSS Code复制内容到剪贴板 <divclass="container"> <sectionclass="initial"> <p> 空间足够的时候，我的宽度是200px，如果空间不足， 我会变窄到100px，但不会再窄了。 </p> </section> <sectionclass="none"> <p> 无论窗口如何变化，我的宽度一直是200px。 </p> </section> <sectionclass="flex1"> <p> 我会占满剩余宽度的1/3。 </p> </section> <sectionclass="flex2"> <p> 我会占满剩余宽度的2/3。 </p> </section> </div> .container{ display:-webkit-flex; display:flex; } .initial{ -webkit-flex:initial; flex:initial; width:200px; min-width:100px; } .none{ -webkit-flex:none; flex:none; width:200px; } .flex1{ -webkit-flex:1; flex:1; } .flex2{ -webkit-flex:2; flex:2; }效果如下图所示：
Example 3： flexbox基本页面布局
CSS Code复制内容到剪贴板 <divclass="container"> <nav> <divclass="container"> <nav> <ul> <li> <ahref="http://www.alloyteam.com/">menu1</a> </li> </ul> </nav> <divclass="content"> <section> ... </section> <section> ... </section> </div> </div> .container{ display:-webkit-flex; display:flex; } nav{ width:200px; } .content{ -webkit-flex:1; flex:1; }效果如下图所示：
Example 4： flexbox的居中布局
CSS Code复制内容到剪贴板 <divclass="vertical-container"> <sectionclass="vertically-centered"> <p> CSS里总算是有了一种简单的垂直居中布局的方法了！ </p> </section> </div> .vertical-container{ display:-webkit-flex; display:flex; height:300px; } .vertically-centered{ margin:auto; }PS：解决兼容性问题
对于Flexbox 以前的几个版本可以使用Autoprefixer后处理程序来实现css3代码自动补全。比如：
CSS Code复制内容到剪贴板 display:flex;编译后：
CSS Code复制内容到剪贴板 display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex;如果你使用Sass，[email protected]，[email protected]题；这样可以支持到IE10 +, 移动端浏览器和最新的FF, Safari, Chrome, IE11, Opera等。github项目地址：sass-flex-mixin
来源：爱蒂网
