flex布局与移动web

# flex与移动web

## 视口

+ **视口**：就是浏览器显示页面内容的屏幕区域，视口可以分为**布局视口**，**视觉视口**和**理想视口**。

+ 布局视口：layout viewport

+ 一般移动设备的浏览器都默认设置了布局视口，用于解决早起的pc端页面在手机上显示的问题
+ IOA、Android 基本都将这个视口分辨率设置为980px，所以PC上的网页大多数都能在手机上呈现。只不过元素看上去很小，一般默认可以通过手动缩放网页。

+ 视觉视口： visual viewport

+ 字面意思，它是用户正在看到的网站的区域，注意：是网站的区域。
+ 我们可以通过缩放去操作视觉视口，但不会影响视口，布局视口仍保持在原来的宽度。

+ 理想视口 ideal viewport

+ 为了使网站在移动端有最理想的浏览和阅读宽度而设定。
+ 理想视口，对设备来讲，是最理想的视口尺寸。
+ 需要手动添加meta视口标签同时浏览器操作。
+ meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多款，我们布局的视口就是多少。

+ meta 视口标签

+ `<meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'`

+ width 宽度设置的是viewport 宽度，可以设置device-width 特殊值

+ initial-scale 初始缩放比，大于0的数字

+ maximum-scale 最大缩放比，大于0的数字

+ minimum-scale 最小缩放比，大于0 的数字

+ user-scalable 用户是否可以缩放，yes或no （1或0)

## 移动端特殊样式

+ box-sizing:border-box 边框和内边距自动内减

+ -webkit-tap-hightlight-color: transparent 取消点击的背景高亮显示

+ -webkit-apprarance:none 取消Safari 浏览器 的按钮和边框默认样式

+ img,a{ -webkit-touch-callout: none; } 禁用长按页面时弹出的菜单

## 移动端技术选型

+ 单独制作移动端页面（主流）

+ 流式布局（百分比布局）
+ flex弹性布局（推荐使用）
+ less + rem + （@media）媒体查询布局
+ 混合布局

+ 响应式页面兼用移动端（其次）

+ 媒体查询
+ bootstrap

## flex

### flex 父项中常见的属性

+ flex-direction: 设置主轴的方向
+ flex-direction: column Y轴排列
+ flex-direction: row-reverse 水平翻转
+ justify-content: 设置主轴上的子元素排列方式
+ jusify-content: flex-ent 从尾部开始排列
+ justify-content: centent; 子元素居中显示
+ justify-content: space-around 居中平分剩余空间
+ justify-content: space-between 两边贴边，中间平分剩余空间
+ flex-wrap: wrap 设置子元素可以换行。
+ align-content: 设置侧轴上的子元素的排序方式（多行）
+ align-content: flex-start 在侧轴的头部开始排列
+ align-content: flex-end 在侧轴的尾部开始排列
+ align-content: center 在侧轴中间显示
+ align-content: space-around 子项在侧轴平分剩余空间
+ align-content: space-between 子项在侧轴先分布在两头，再平分剩余空间
+ align-content: stretch 设置子项元素高度平分父元素高度
+ align-items: 设置侧轴上的子元素排列方式（单行）
+ align-items: flex-start 从上倒下 (默认值,一般不需要设置)
+ align-items: flex-end 从下到上
+ align.items: center 挤在一起垂直居中
+ align-items: stretch 拉伸但是子盒子不能设置高度
+ flex:flow: 复合属性，相当于同时设置了flex-direction 和 flex-wrap
+ flex-direction: column wrap; 纵向排列，内容占满后换行。

### flex 布局子项常见的顺序

+ flex 子项所占的份数，定义子项目分配剩余空间

+ align-self 控制子项目自己在侧轴的排列方式，可以让单个项目与其他项目不一样的对齐方式，可覆盖align-items 的属性

+ 例：`.c17 div:last-child {

​ *align-self*: flex-end;

​ }`

+ order 属性定义子项的排列顺讯（前后顺序）

+ 例：` .c17 div:nth-child(2) {

​ *order*: -1;

​ }`

 

原文地址：https://www.cnblogs.com/liea/p/11211139.html