移动端美团案例分享（flex布局初体验）

前言：flex布局提供了全新的布局思路，拓宽了我们的布局方式，对有效节省代码量、提升开发效率大有脾益。

美团案例分享

1.顶部搜索框布局思路：

左右两端采取固定宽度，中间输入框采取宽度自适应方案。

通过给父盒子添加flex属性，将未定义宽度的子元素设置为flex:1; 子元素将占据父盒子剩余的全部空间。

问题：如果先写两个固定宽的子元素，最后写宽度自适应的子元素，那么该子元素不会居中展示。

解决方案：a.通过给宽度自适应的子元素设置order属性，让其在中间展示

                  b.写完第一个固定宽的子元素，再写自适应宽的子元素，最后再写第二个固定宽的子元素。

2.美团APP下载提示模块

左侧美团logo的两种写法

a.传统写法：使用盒子将文字包裹，再给盒子设置背景颜色

        优点：符合初学者开发习惯

        不足之处：结构冗余、代码繁杂

b.内边距填充：给文字设置背景色，再通过padding填充值合适的宽高，达到a的效果

        优点：减少代码量

        不足之处：需要考虑整体盒子被撑开的问题，可通过给父元素设置IE盒模型解决

3.主功能区

flex布局思路：

结构——可以直接使用 ul>li*10{$} 搭建基础结构

样式——ul设置弹性盒属性，li设置flex:20%;，需要注意的是，ul需要设置强制换行，这样子元素才会呈现如图想要的展示效果。

li也可以设置弹性盒，通过flex相关属性来控制内部元素的排列方向和对齐方式

4.商品展示列表

因为是主要展示区，所以个人使用H5新增的<main></main>标签书写

具体结构介绍：给main一个具体的宽度，定义为弹性盒子，其下结构为 a标签是第一层盒子，里面包含了img和div，img引入图片，div又包括了四个小标签

 样式介绍：main定义为弹性盒，排列方向为交叉轴，子元素a独占一份flex:1；a再设置为弹性盒，使其子元素横向排列，再设置合适的间距

需要注意的是，三个a元素都有上下两个边框线，如果直接给三个a元素都设置了边框线，就会导致中间的a 的边框线变为2px，可以通过nth-child(2)获取到第二个a，再将其边框设置为0就能解决

5.友情链接模块布局思路

结构——ul>li*3>a[href=#]

样式——ul设置弹性盒子，控制子元素沿交叉轴排列；三个li 各占一份，再设置li为弹性盒子，控制a元素居中对齐    

6.备案号模块

结构——直接用div包裹p标签，再让p标签text-align:center;调整合适的外边距即可

样式——通过p标签的两个伪元素 p::before: // p::after ，设置文字的左右两侧的横线

需要说明的是，我将伪元素设置为行内块元素，而不是块元素，因为块元素独占一行，这样达不到在一列显示的效果。设置好了边线之后，会发现此时文字两侧的边线默认是以文字的底部对齐的，这时通过给伪元素设置vertical-align: middle;，让其沿着文字的中部对齐就可以了。

本次分享到此结束咯，谢谢~