flex弹性布局

流式布局

1.移动端浏览器兼容性较高 是webkit内核

移动端调试方法

1.谷歌浏览器模拟手机（当前主要）

2.搭建本地web服务器

3.使用外网ip

视口 （viewport）

浏览器显示页面内容的屏幕区域分为布局视口（不合适，980px等放在手机上展示效果不好），视觉视口（用户正在看到的区域，但是可能显示不全），理想视口（设备有多宽，页面有多大。meta视口标签）

meta视口标签

移动端的页面都要写这样一句话。

二倍图

物理像素/物理像素比

像素是真实存在的，电脑端的像素和我们布局的像素是一一对应的，但是手机端不是。

有一个像素比的关系。比如iphone8,页面的1px，对应手机2px。物理像素比dpr。

物理像素比

由于视网膜屏，这里一个像素由四个（2*2）更小的像素替代

所以图片等被放大了，会出现模糊，所以我们放一个100x100的图片，然后我们手动的把他缩小到50x50

两倍图

要把100x100手动缩小

设置样式

还有三倍，四倍等

背景图片缩放

规定背景图片的尺寸

1.background-size:图片的宽度 图片的高度 background-size:200px 300px

2.根据百分比，按照父盒子的宽高的百分比 background-size:50% 50%

3.cover,contain.

​ cover要求把盒子完全盖住（等比例放大），可能图片会显示不全、

​ contain 把图片拉伸，宽度和高度谁先铺满到父盒子边缘，就停止

使用cutterman可以切出多倍图

移动端的主流开发方案

1.单独开发移动端的页面（主流方案）

​ 基于webkit内核，对h5c3的兼容性特别高

​ 移动端的时候使用normalize.css来初始化页面 npm install normalize.css

2.响应式的页面开发（调试兼容性问题，比较麻烦）

CSS3的新的盒子模型

1.传统盒子模型 box-sizing:content-box

​ 实际上盒子的大小是width+padding+margin+border的大小

2.css3的盒子模型 box-sizing:border-box

​ 不计算padding/border，他们不会再撑大盒子,从边框开始算盒子大小

移动端的特殊样式

移动端布局选择的原则

采取什么形式的开发，由项目经理决定的。

流式布局（百分比布局）

按照百分比布局，同时建议

设置最大和最小宽度，max-width:980px,min-width:320

Flex布局

1.传统布局和flex布局

传统布局很繁琐，但是兼容性比较好，可以做到很多浏览器兼容

flex布局兼容较差，但是很开发更加简单

2.flex初体验

可以自适应屏幕改变，无需清除浮动 display:flex，设置号flex之后，行内元素也可以设置宽高了

3.flex的布局原理

flex也叫弹性布局，任何一个容器都可以使用flex布局，容器的子元素叫做项目

总结：通过给父盒子设置flex属性，来控制子盒子的排列方式

4.flex布局父项常见的属性

1.主轴和侧轴flex-direction ，默认从左向右

flex-direction:row 这是默认

flex-directin:row-reverse 从右向左

flex-direction:colomn 把y轴设为主轴

2.设置主轴上的排列方式justify-content（首先要确定谁是主轴，别弄错了）

justify-content:flex-start ：默认，贴着左边对其

justify-content:flex-end：贴着右边对其，center是居中对齐，space-around平分剩余空间（左右的margin都相等，1000-800=200，200/4=50 ，然后他们每个元素左右各25）

space-between：两边元素先贴边，然后其他元素再平分剩余空间

flex会让子元素再一行显示

3.flex-wrap （一行满了会不会换行）

flex默认的子元素是不换行的，如果撑不开，会缩小子元素，让他们在一行显示

默认值是no-wrap, wrap在装不开会换行

4.align-items 设置侧轴的排列方式，不是主轴的那个轴式侧轴

align-items: stretch 如果主轴式row，不设置高度的情况，该项目会拉伸到底部

flex-start,flex-end,center,scretch等

5,align-content 设置多行侧轴的排列方式

出现换行（多行）的时候，设置align-content来实现侧轴的排列方式

6.flex-flow 设置主轴方向和是否换行的合写

flex-flow: row wrap .设置行为主轴，设置换行

5.flex布局子项常见的属性

1.flex属性（flex的值表示占几份）

定义子项目分配剩余空间，用flex来表示占多少份数

左右占据一份的时候，在中间的样式设置flex:1，他一个则分了中间的剩余元素

如果3个元素平分剩余空间，flex：1则是给每个元素都分配一分，但是可以通过单独给一个元素设置flex:2让中间的占据两份。

2.align-self 控制某一个子项在侧轴上的排列方式

center,flex-start,flex-end，strentch等属性

3.order属性定义项目的排列顺序

数值越小排列越靠前

三个span的值依次1，2，3.他们的order式0，-2，-1 则它们的显示效果是2 ，3，1