标签：maximum ios系统 start end 模式 内核 lex 统一 居中
移动布局：
1，移动设备 手机和ipad
安卓系统iOS系统
安卓系统 内置浏览器是谷歌，iOS内置safari浏览器，他们的内核都是webkit，不考虑兼容性，需要考虑的是安卓和iOS的区别
2，布局
设备宽度···设备的实际大小，设备的分辨率···厂家给的
页面的大小···设计稿上的大小
浏览器的视口···浏览器自带的 通过document.documentElement.clientwidth 查看在移动设备上如果不做处理一般默认980
例子----
设备宽320 ，页面的宽1200 ，浏览器的视口980px 三种不统一，我们用移动端看页面，浏览器的视口会自动缩小，以100%完整展示页面，就会变得模糊不清，特别挤
我们需要把这三个变得统一：
1，移动设备宽（320）和浏览器视口宽（980）变得一致
在head之间加一个meta标签name=‘viewport’
设备宽度和浏览器视口一致时，如果页面宽大于这个数字，就会出现滚动条
var meta=document.createElement(‘meta‘)
meta.name=‘viewport‘;
meta.content=‘width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no‘;
document.head.appendChild(meta)
2，当移动设备和浏览器视口一致时，如果你还用传统开发，如果页面超过设备宽，超过的部分会被截掉
不能用传统的页面开发模式
a）弹性布局
b）流式布局（百分百布局）···相对父级
c）响应式布局
d）rem布局
弹性布局----
1，分两部分---弹性父级，弹性子元素
2，给父级设置display：flex或inline-flex *弹性子元素通常在弹性盒子内一行显示
flex-direction 属性 指定了弹性子元素在父容器中的位置
row：
横向从左到右排列（左对齐），默认的排列方式
row-reverse：
反转横向排列（右对齐，从后往前排，最后一项排在最前面）
column：
纵向排列
column-reverse：
反转纵向排列，从后往前排，最后一项排在最上面
justify-content 属性 内容对齐
flex-start：
弹性项目向行头紧挨着填充
flex-end：
弹性项目向行尾紧挨着填充
center：
弹性项目居中紧挨着填充
space-between：
弹性项目平均分布在该行上
space-around：
弹性项目平均分布在该行上，两边留有一半的空间间隔
align-items 属性 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式
flex-start：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：
弹性盒子元素在该行的侧轴（纵轴）上居中放置。如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
baseline：
如弹性盒子元素的行内轴与侧轴为同一条，则该值与‘flex-start‘等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为‘auto‘，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸
flex-wrap 属性 用于指定弹性盒子的子元素换行方式。
nowrap - 默认，
弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。
该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。
标签：maximum ios系统 start end 模式 内核 lex 统一 居中
原文地址：https://www.cnblogs.com/xiaotaiyangye/p/10827980.html
