弹性布局(flex container)，页面中任何一个元素只要设置了display:flex属性，那么当前盒子都称为弹性盒子。弹性盒子默认有两条轴: 默认水平显示的主轴 和 始终要垂直于主轴的侧轴(也叫交叉轴)，在弹性盒子中所有的子元素都是沿着主轴方向显示。
与传统布局的区别
传统布局，基于盒模型，依赖 display属性 、position属性 、float属性，它对于那些特殊布局非常不方便。
传统布局
兼容性好
布局繁琐
局限性，不能在移动端很好的布局
flex布局
操作方便，布局及其简单,移动端使用比较广泛
pc端浏览器支持情况比较差
IE11或更低版本不支持flex或仅支持部分
建议
如果是pc端页面布局，采用传统方式
如果是移动端或是不考虑兼容的oc则采用flex
1、容器
采用flex布局的元素，成为flex布局
只要将一个元素的display的值设置为flex或者inline-flex，此元素就变成flex容器
2、项目
flex容器中的所有子元素都自动成为容器成员，称为flex项目
flex容器中的所有flex元素都会有下列行为：
元素排列一行（flex-direction属性的初始值是row）
元素从主轴的起始线开始。
元素不会再主维度方向拉伸，但是可以缩小
flex-basis属性为auto
flex-wrap属性为norap(不换行)
3、主轴和交叉轴
当使用flex布局时，首先想到的是两根轴线——主轴和叫交叉轴
主轴由flex-direction定义，另一根轴垂直于它。也就是说主轴和交叉轴不是固定的，而是可以自己定义的。
默认情况下，水平方向是主轴，垂直方向是交叉轴，单可以通过flex-direction属性更改
元素成为容器后，元素的子元素默认成为容器的项目，但项目中的子元素不会，除非设置项目也成为容器
项目被设置容器后，也拥有主轴和交叉轴
**注意：**当为父元素设置flex布局后，子元素的float、clear和vertical-align属性将失效。
4、两种容器
容器可以设置为两个值flex，inline-flex
区别
flex：容器成为块元素
inline-flex：容器成为行内块元素，不会占满全屏
属性 说明
flex-direction 设置主轴方向
justify-content 项目再主轴上的排列方式
flex-wrap 项目是否换行
align-items 项目在交叉轴的排列方式（单行）
align-content 项目在交叉轴的排列方式（多行）
flex-flow 复合属性，相当于同时设置了 flex-direction 和 flex-wrap
来千语创想移动应用开发平台学习更多APP开发知识：app开发，app制作，app开发源码下载，app开发框架，app制作模板等免费获取。
千语创想-专业APP开发、app定制服务商，提供一站式移动应用解决方案，满足您的各类需求，欢迎免费评估需求和获取报价。
立即免费在线制作一个APP，新手注册即送开发大礼包
提交app定制需求，免费获取报价和周期：
电脑请点击https://www.qianyuthink.com/?url=/index?uzchannel=500
手机请点击https://www.qianyuthink.com/?url=/m/customizedservice
