移动web第三天 flex布局

一、移动端特点

（1）PC端网页与移动端的不同

    PC端：屏幕大，网页有固定版心；
    移动端：屏幕小，网页宽度多数为100%。

（2）分辨率

◆屏幕尺寸：☞屏幕对角线的长度，一般用英寸度量
◆分辨率分类：
1、物理分辨率是生产屏幕时就固定的，它是不可被改变的
2、逻辑分辨率是由软件（驱动）决定的。

（3）视口

使用meta标签设置视口宽度，制作适配不同设备宽度的网页

视口.png

（4）二倍图

二倍.png

二、百分比布局（流式布局）

效果： 宽度自适应，高度固定
提示：有语义化标签：footer、 header

流.png

三、Flex布局（★弹性布局）

与浮动（float）区别：

  浮动：不占位、脱标，容易导致父盒子塌陷
  flex布局：
  a、是一种浏览器提倡的布局模型
  b、布局网页更简单、灵活、快速
  c、 避免浮动脱标的问题

（1）设置方式：

给父元素添加 display: flex
子元素可以自动的挤压或拉伸

（2）组成部分：

a、弹性容器：弹性盒子的父亲
b、弹性盒子
c、 主轴
d、侧轴 / 交叉轴

flex布局.png

（3）主轴对齐方式（水平方向）

◆属性: justify-content
◆属性值：

主轴.png

A、space-around：

盒子2.png

B、space-between

父盒子0.png

C、space-evenly

一样距离.png

（4）侧轴对齐方式（垂直方向）

◆属性1: align-items（添加到弹性容器，父盒子）
◆属性2: align-self 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
◆属性值

侧轴.png

（5）伸缩比

◆目的：使用flex属性修改弹性盒子伸缩比。
◆属性：flex：值；
◆取值分类：数值（整数）
注意： 只占用父盒子剩余尺寸

四、总结

（1）弹性盒子：弹性容器的最近一级子元素(亲儿子子元素)

1.默认的宽度由内容所撑开，默认的高度为父元素的高度(侧轴方向默认是拉伸)；
2.没有块级，行内，行内块元素之分，统统都是弹性盒子(可以直接设置宽高，一行显示多个)；
3.默认不换行，宁愿牺牲自己的宽度，都不会自动换行。

（2）
弹性容器设置的属性：df，jc，ai
弹性盒子设置的属性：align-self，flex