主要介绍了详解CSS3伸缩布局盒模型Flex布局的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

一、Flex 布局是什么？ CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局（Flexible Box）模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态的，这里简称Flex。 CSS3引入的布局模式Flex布局，主要思想是让容器有能力让其子项目能够改变其 宽度 、 高度 、 顺序 ，以最佳的方式填充可用空间。Flex容器会使子项目(伸缩项目)扩展来填满可用空间，或缩小它们以防止溢出容器。 任何一个容器都可以指定为 Flex

用途 弹性盒子对于前端web网页布局来说，有着举足轻重的作用，移动端也是如此。掌握了弹性盒子用法，对于目前编写自适应页面很重要。掌握这种布局规则，是一项必备技能。   弹性伸缩盒模型说明 主轴（main axis） 是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end**。 交叉轴（cross axis） 是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cro