一、flex的布局原理
总结flex布局的原理：就是通过给父盒子添加flex属性，来控制盒子的位置和排列顺序
二、flex布局父项常见的属性
（一）、flex-direction设置主轴的方向
主轴与侧轴
- 在flex中，是分为主轴和侧轴两个方向：同样的叫法有：行和列、x轴和y轴
- 默认主轴方向就是x轴方向，水平向右
- 默认侧轴方向就是y轴方向，水平向下
flex-direction属性决定主轴的方向（即项目排列的方向）
注意：主轴和侧轴是会变化的，看flex-direction设置谁为准，剩下的就是侧轴，而我们的子元素是跟着主轴来排列的
（二）、justify-content设置主轴上的子元素的排列方式
注意：使用这个属性之前一定要确定哪个是主轴
（三）、flex-wrap设置子元素是否换行
默认情况下，项目都排在一条线上，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面
（四）、align-items设置侧轴上的子元素的排列方式（单行）
该属性是控制子项在侧轴（默认是y）上的排列方式在子项为单向的时候使用
（五）、align-content设置侧轴上的子元素的排列方式
设置子项在侧轴的排列方式并且只能用于子项出现换行的情况（多行）在单行下是没有效果的
（六）、align-content和align-items的区别
（七）、flex-flow
flex-flow属性是flex-direction和flex-wrap属性的复合型
（八）、总结
三、flex布局子项常见的属性
（一）、flex子项目占的份数
flex属性定义子项目分配剩余空间，用flex来表示占多少份数
（二）、align-self控制子项自己在侧轴的排列方式
（三）、order属性定义子项的排列顺序（前后顺序）
数值越小，排列越靠前，默认值为0
注意：和 z-index不一样
四、携程网首页案例制作
一、技术选型
方案：采用单独制作移动页面的方案
技术：布局采用flex布局
移动开发—详解flex布局之携程网首页案例制作（二）https://developer.aliyun.com/article/1383508
