移动端常见布局——flex布局、百分比布局

移动端常用布局方式

当移动端单独制作时，使用传统的布局虽然兼容性好，但是它的布局繁琐，且有局限性，不能在移动端很好的布局。所以很多时候我们可以借助下面的几个方式来帮助我们更好的布局。
移动端常见布局：

• 流式布局（百分比布局）
• flex 弹性布局
• less+rem+媒体查询布局
• 混合布局

响应式布局：

• 媒体查询
• bootstarp

今天我们先来认识一下百分比布局和flex布局

1.流式布局：

流式布局，就是百分比布局，也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。
如：
如果给定一个盒子，固定好它的宽（width）为200px，高（height）为100px。我们想将它平分为4份，那么忽略边框的影响。每一份的宽应该是50px。此时我们是不是可以用百分比布局设置子元素的宽为25%吧。我们下面来看看是不是这样的

    <ul class=<