单独移动端页面-流式布局和flex弹性布局技术

---

前言

前面总结了很多pc端的布局以及方法，我们来谈谈移动端常见的两种布局方式，单独移动端页面，技术包括：流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局。下面是小编介绍的流式布局和flex弹性布局。

说到移动端，首先来谈谈移动端的基础知识：

• 视口：就是浏览器显示页面内容的屏幕区域，分为：布局视口、视觉视口、理想视口。主要使用的是理想视口，理想视口：meta视口标签布局宽度和理想视口宽度一致。在html头部区域加上：
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
• 二倍图：物理像素（分辨率）、物理像素比。我们开发的1px不一定等于1个物理比,在pc端页面，1个px等于1个物理像素的，但是移动端就不尽相同.一个px的能够显示的物理像素点的个数，称为物理像素比或屏幕像素比,比如 iPhone8就存在1px=2个物理像素，物理像素比就是2。
• 知识补充：
  1）背景缩放background-size:x y;里面的单位可以写百分比是相对于父元素来说的。属性值：cover使背景图片完全覆盖整个盒子，可能有部分背景图片显示不出、contain将高度和宽等比例拉伸，当宽度或高度铺满整个盒子就不会再拉伸来，可能有部分空白区域.
  2）二倍精灵图的缩放：步骤：1、将精灵图在ps中等比例缩放为原来的一半；2、之后根据所取的图大小测量坐标；3、再写background-size：精灵图原来宽度的一半 auto；
• 移动端解决方案：
  1）下载并引入css初始化normalize.css/
  2）特殊样式：如下

/*让盒子变成css3盒子模型，在加上boder或者padding后不再撑大盒子了*/
box-sizing: border-box;
/*为移动端链接清除默认蓝色背景*/
-webkit-tap-highlight-color:transparent;
/*为移动端去掉外观样式*/
-webkit-appearance：none;
/* 禁止长按屏幕弹出菜单  */
img,a { -webkit-touch-callout:none;  } 

---

一、流式布局是什么

流式布局就是百分比布局
1、宽度给百分比来根据屏幕的宽度设定的，不受固定像素的限制
2、为了照顾盒子在合理的范围内，给盒子一个max-width、min-width、max-height、min-height

二、flex弹性布局

1.布局原理

       通过给父盒子添加display:flex;来控制子盒子的位置和排序方式，父盒子是容器，子盒子是项目。
特点：
         1.1、任何元素都可以设置弹性布局
         1.2、自适应的效果
         1.3、当父盒子设置为flex布局后，子元素的float、clear、vertical-align属性将失效。

2.运用场景

2.1、当使用pc端布局的时候，我们还是用传统的方式布局
2.2、如果移动端或不考虑兼容性问题的pc端页面布局，则考虑使用flex布局

3.属性

• 给父盒子添加 display：flex；当布局模式为flex技术后，行内元素就不用转换成块元素了，直接可以设置样式，也不需要清除浮动了，子盒子默认沿着主轴方向排列。
• 给父盒子添加的属性：
  1、设置主轴的方向 ：属性 flex-direction：如果设置的主轴是x轴，则y就是侧轴，我们的子元素是根据主轴来排序的。

属性值	说明
row	从左到右 X轴
row-reverse	从右到左
column	从上到下Y轴
column-reverse	从下到上

       2、设置主轴上的子元素的排序方式 ：属性：justify-content：

属性值	说明
flex-start	默认值，如果主轴是X轴，则排序的方式是从左到右
flex-end	从尾部开始排列，相当于右浮动，但是子盒子的排序顺序是正确的
flex-center	在主轴居中对齐，如果主轴是X轴，则就是水平居中
space-around	平分剩余空间，就是每个子盒子的左右距离一样
space-between	先两边的盒子贴边，再平分剩余的空间

       3、设置侧轴上的子元素的排序方式(单行） ：属性：align-items：

属性值	说明
flex-start	默认值：从上到下
flex-end	从下到上
center	挤在一起，如果主轴是X轴，就是垂直居中
stretch	沿着侧轴拉伸

---

代码如下（示例）：

       4、设置侧轴上的子元素的排序方式(多行）只能用在子盒子出现换行的情况 ：属性：align-content：

属性值	说明
flex-start	默认值，从侧轴的头部开始
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分空间，就是每个盒子的左右的距离一样
space-between	子项在侧轴先分布在两头，在剩下的盒子平分剩余空间
strech	设置子项元素高度平分父盒子高度

       5、设置子元素是否换行 ：属性：flex-wrap

属性值	说明
wrap	换行
nowrap	默认的，不换行

       6、复合写法 ：flex-flow :row wrap;

• 给子盒子添加的属性：
  1、 flex：定义子项目分配剩余空间 表示占多少份数

 flex:<number>; /* number可以是数字、百分比、默认值是*/

        2、 align-self：控制子项自己在侧轴上的位置，其属性值和父级align-items可以用，适用于某个盒子与其他盒子样式不统一，可以覆盖align-items属性，默认值是suto表示继承父元素的align-items，如果没有父元素，则等同于stretch
        3、order：数字；定义项目的排序顺序。在css里排序盒子的位子，数字越小，盒子的位置就在前面