今天小编跟大家讲解下有关几个CSS3的flex弹性盒模型布局的简单例子演示 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关几个CSS3的flex弹性盒模型布局的简单例子演示 的相关资料，希望小伙伴们看了有所帮助。
Flexible Box(弹性盒子)能让页面的分布更合理和方便，这是之前使用常规的布局方式所做不到的。
XML/HTML Code复制内容到剪贴板 <divclass="warp"> <divclass="modular">1</div> <divclass="modular">2</div> <divclass="modular">3</div> <divclass="modular">4</div> </div>display:flex和display:box有什么区别？
前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。
CSS Code复制内容到剪贴板 .warp{ width:100%; height:100px; display:-webkit-box; display:-moz-box; display:-webkit-flex; display:-moz-flex; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -webkit-box-align:ustify; -moz-box-pack:justify; -moz-box-align:justify; box-pack:justify; box-align:justify; flex-direction:row; -webkit-flex-direction:row; flex-wrap:nowrap; flex-flow:rownowrap; justify-content:center; align-items:center; align-content:center; } .warp.modular{ width:80px; height:80px; background-color:#eee; text-align:center; order:-1; flex-grow:1; flex-shrink:2; flex-basis:auto; flex:12100px; align-self:center; }直接上代码，写了个Demo便于理解,其中warp为父元素，称为“伸缩容器，modular为子元素，称为“伸缩项目”。
1) Flexbox布局最适合应用程序的组件和小规模的布局，而网格布局更适合那些更大规模的布局。
2) 目前没有浏览器支持 box-flex 属性，Firefox 支持替代的 -moz-box-flex 属性，Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。
3) CSS的columns在伸缩容器上没有效果。
4) float、clear和vertical-align在伸缩项目上没有效果。
例：移动端导航（居中，左右，自适应居中，自适应竖向排列）
CSS Code复制内容到剪贴板 <styletype="text/css"> .nav{ background:#00BFFF; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-flex-flow:rowwrap; -webkit-flex-flow:columnwrap; justify-content:flex-start; justify-content:flex-end; } .nava{ text-decoration:none; display:block; padding:1em; color:#fff; flex:1; } @mediaalland(max-width:800px){ .nav{ justify-content:space-around; } } </style>XML/HTML Code复制内容到剪贴板 <ulclass="nav"> <li><ahref="#">1</a></li> <li><ahref="#">2</a></li> <li><ahref="#">3</a></li> <li><ahref="#">4</a></li> </ul>例：移动端常用自适应布局
CSS Code复制内容到剪贴板 <styletype="text/css"> .wrapper{ display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-flex-flow:rowwrap; flex-flow:rowwrap; } .wrapper>*{ padding:10px; flex:1100%; } .header{ background:#FF6347; } .footer{ background:#90EE90; } .main{ background:#00BFFF; } .aside-1{ background:#FFD700; } .aside-2{ background:#FF69B4; } @mediaalland(min-width:600px){ .aside{ flex:1auto; } } @mediaalland(min-width:800px){ .main{ flex:30px; } .aside-1{ order:1; } .main{ order:2; } .aside-2{ order:3; } .footer{ order:4; } } </style>XML/HTML Code复制内容到剪贴板 <divclass="wrapper"> <headerclass="header">顶部</header> <articleclass="main"> <p>我在中间显示的文字</p> </article> <asideclass="asideaside-1">我在左边显示的文字</aside> <asideclass="asideaside-2">我在右边显示的文字</aside> <footerclass="footer">底部</footer> </div>来源：爱蒂网
