移动web基础-felx布局

芒果555
181 阅读4分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1.移动端特点

1.1.1移动端和PC端网页不同点

问题1:PC端网页和移动端网页的有什么不同？

问题1:

​ PC屏幕大，网页固定版心

​ 手机屏幕小， 网页宽度多数为100%

1.1.2 谷歌模拟器

问题1:如何在电脑里面边写代码边调试移动端网页效果？

问题1:

​ 谷歌模拟器

1.1.3 分辨率

屏幕尺寸:指的是屏幕对角线的长度，一般用英寸来度量

硬件分辨率（出厂设置）

缩放调节的分辨率（软件设置）

分辨率分类:

​ 物理分辨率是生产屏幕时就固定的，它是不可被改变的

​ 逻辑分辨率是由软件（驱动）决定的

注意：UI给我们的移动端设计图一般是物理分辨率，我们用psd文件时需要将设计图改为2X模式

​ 这样我们写的才是逻辑分辨率

1.1.4 分辨率参考

问题1:制作网页参考物理分辨率还是逻辑分辨率？

问题1:

​ 逻辑分辨率

1.1.5 视口

问题1:默认情况下，网页的宽度和逻辑分辨率相同吗？

问题2:视口标签有什么作用?

问题1:

​ 不同， 默认网页宽度是980px。

问题2:

​ 显示HTML网页的区域，用来约束HTML尺寸。

设置视口之前: html的宽度就是PC的宽度.

设置视口以后, html的宽度就是设备的宽度

1.1.6 二倍图

为何有倍图原因:

​ 显示更细腻更清晰

​ (更高分辨率显示更清晰)

2.百分比布局

百分比布局， 也叫流式布局

百分比布局特点:宽度自适应，高度固定。

（了解即可，现在用的很少）

3.flex布局

1.flex布局介绍

Flex布局/弹性布局：

  • 是一种浏览器提倡的布局模型
  • 布局网页更简单、灵活
  • 避免浮动脱标的问题

caniuse.com可以查看技术兼容性问题

2.使用flex布局

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

开启flex布局后，元素不会存在脱标的问题，没有行内、行内块、块元素的概念了

flex布局中分为主轴和侧轴（相当于平面中的X和Y轴）

2.1主轴方向的对齐方式

**justify-content: flex-start;**默认值, 起点开始依次排列

QQ截图20220704214242.png flex-end 终点开始依次排列

QQ截图20220704214439.png **justify-content: center;**居中

QQ截图20220704214815.png

justify-content: space-around; 盒子左右有间隙,中间间隙是左右的二倍

QQ截图20220704214933.png

justify-content: space-evenly; 两侧和盒子中间间隙一样大

QQ截图20220704215024.png

justify-content: space-between; 两侧没有间隙

QQ截图20220704215204.png

2.2侧轴的对齐方式

**align-items: flex-end;**底部对齐

1656942900564.png

**align-items: flex-start;**头部对齐

1656942961762.png

**align-items: center;**中间对齐

1656943004654.png

**align-items: stretch;**拉伸 注意：使用拉伸需要把子盒子的高度注释，不然没用

1656943078844.png algin后边的items是每一个的意思，代表选中父元素里面的每一项

可以将items换成self给子元素！！，给子元素加可以实现单个元素实现侧轴的对齐方式

2.3使用flex布局实现div盒子水平垂直居中

使用flex可以更简单的实现水平垂直居中

.div{                       父盒子
	display:flex;
    justify-content:center;
    algin-items:center;
}

3.flex伸缩比

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

使用flex属性修改弹性盒子伸缩比,

取值为数值(整数)，注意没有单位，只代表份数

flex:1

同时设置width和flex时，width会失效。

1656943734709.png

4.左右固定-中间自适应(圣杯布局)

我们可以用flex属性实现圣杯布局，左右两侧宽度100px固定，中间宽度根据屏幕宽度自适应

1656943860578.png

  .box {

   display: flex;

   width: 100%;

   height: 40px;

   border: 1px solid #000;

  }

  .box span:nth-child(2) {

   flex: 1;

   background-color: pink;

  }

  .box span:last-child,

  .box span:first-child {

   width: 50px;

   height: 40px;

   background-color: skyblue;

  }

5.移动端CSS初始化

移动端 CSS 初始化推荐使用 normalize.css
Normalize.css：保护了有价值的默认值
Normalize.css：修复了浏览器的bug
Normalize.css：是模块化的
Normalize.css：拥有详细的文档
官网地址： http://necolas.github.io/normalize.css/
特殊样式:
    /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
	a{-webkit-tap-highlight-color: transparent;}

6.设置主轴方向

主轴默认是水平方向, 侧轴默认是垂直方向

修改主轴方向属性: flex-direction (相当于主轴变成Y轴，侧轴变成了X轴)

7.弹性盒子换行

特性： 给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。

弹性盒子换行显示 : flex-wrap:wrap，添加flex-warp:wrap后,弹性盒子满了会自动换行

8.设置侧轴对齐方式

前面的 algin-items是设置单行的垂直对齐，当侧轴有多行时，需要使用align-content

align-content的属性和主轴的一模一样，效果也是一样的，不多赘述

avatar
文章
阅读
粉丝