常见的移动端布局方法-flex布局，很重要！！

其他的布局，你掌握也就ok了，但是这个布局，你一定要非常非常熟悉，因为我们后面的前段框架react 以及手机端混合app开发，微信小程序开发都是用的是这个布局。

我做了以一个仿 携程网的移动端首页，供你参考

flex布局原理

1. 这个是“弹性盒子”布局，任何一个元素都可以指定flex布局，

2. 注意：

   • 如果父盒子有flex那么子元素的，float clear vertical-align都会失效
   • 采用了flex元素，的被称为容器，我们的flex都是给父盒子的，flex指定之后，里面的子容器就是容器成员，项目flex item，

   1. 原理：通过给父盒子添加flex属性，来控制里面的子盒子的排雷方式

flex布局常用属性

父项常见的属性

1. 具有六个属性给我的父盒子

详细的属性值和相关的说明：请你去参见字典，百度一下就行

子项常见的属性

• flex属性，表示子项目占有剩余空间的的份数,定义子项目占有多少份，属性值是数值类型，注意一下这个里面是平均分配的。
• align-self 控制子项目在侧轴的排列方式。其属性值是和align-item一样。
• order 属性定义项目的排列，值越小越往前。

/*控制子项目在剩余空间里面的所占有的份数*//*在item的父级上面要给一个dispaly:flex；*/.item { flex:3; /*注意一下 flex可以跟百分比%*/ }

仿携程网

通过代码，我们来展示核心功能

技术选型方案：单独的绘制页面，布局技术选型：flex布局

/*居中算法*/.search-index { /*固定定位跟父亲没有关系，与屏幕为准*/ position: fixed; top: 0; /*注意一下这个，居中显示的算法，不能写marign'-left，因为我们的宽度不是固定的,这个讲居中显示算法非常常用，*/ left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); /*固定定位的盒子要有宽度*/ width: 100%; height: 44px; /*限定大小*/ min-width: 320px; max-width: 540px; background-color: pink; /*不能写margin 0 auto 因为固定的定位maing无效*/}/*常见的上下布局,这个布局非常的重要，你无论如何都要掌握*/.local-nav { display: flex; height: 64px; margin: 3px 4px; background-color: #fff; border-radius: 8px;}.local-nav li { flex: 1;}.local-nav a { display: flex; /*主轴切换，由于是单行的，所以我们使用aligin-item就行*/ flex-direction: column; align-items: center; font-size: 12px;}.local-nav-icon { width: 32px; height: 32px; background-color: pink; margin-top: 8px; background: url(../images/localnav_bg.png) no-repeat 0 0; background-size: 32px auto;}/*注意一下，我们的简化写法*//*利用属性选择器。简化结构*/+++.local-nav li [class^="local-nav-icon"] { width: 32px; height: 32px; background-color: pink; margin-top: 8px; background: url(../images/localnav_bg.png) no-repeat 0 0; background-size: 32px auto;}.local-nav li .local-nav-icon-icon2 { background-position: 0 -32px;}+++/* 背景线性渐变 *//*linear-gradient（起始方向，颜色1 ，颜色2 ，....）；-webkit-linear-gradient（起始方向，颜色1 ，颜色2 ，....）；注意一下，这里额起始方向 可以是方位词 比如 left top*/++++++