flex布局

稗子酒

已于 2022-04-18 11:20:04 修改

阅读量115

点赞数

分类专栏：笔记文章标签：前端

于 2021-12-29 22:04:43 首次发布

本文链接：https://blog.csdn.net/weixin_64252848/article/details/122225716

版权

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

PC端/移动端不同？
PC端
屏幕大，网页固定版心
端浏览器繁多，更多考虑兼容性问题。（布局：浮动+定位+标准流）
移动端
手机屏幕小，网页宽度多数为100%，是适配手机屏幕宽度
移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性

物理分辨率和逻辑分辨率
物理分辨率：硬件所支持的，屏幕出厂就设定无法修改
逻辑分辨率：软件可以达到的，我们开发中写的是逻辑分辨率

视口
视口（viewport）就是浏览器显示页面内容的屏幕区域。
视口的分类：
布局视口。 iOS, Android基本都将这个视口分辨率设置为980px。
视觉视口。用户正在看到的网站的区域。
理想视口。设备有多宽，我的网页就显示有多宽

视口标签
有了视口标签，可以达到我们想要的理想视口。

width=device-width：视口宽度=设备宽度 initial-scale=1.0：初始页面缩放倍数 maximum-scale=1.0 最大缩放倍数 user-scalable=0 不允许用户缩放页面（移动端）或者为 no 如果为 yes 则允许用户缩放

二倍图
其实实际开发中还有三倍图甚至四倍图等，多倍图，但是现在市场还是二倍图偏多，我们称为二倍图。
简单理解，二倍图存在就是为了让页面中图片更加清晰，遵循即可。
网页美工的设计稿基本是 750px
我们前端工程师拿到设计稿利用像素大厨选择 2X，进行缩小一半，按照提示的单位开发即可。

flex布局
flex布局极大的提高了我们布局的效率，更简单、灵活。
display: flex; 一定要给亲爸爸加。

justify-content:;在此属性后添加主轴对齐方式加在父盒子身上
主轴布局方式
属性值作用
flex-start 默认值, 起点开始依次排列
flex-end 终点开始依次排列
center 沿主轴居中排列
space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

侧轴对齐方式:
align-items:;在此属性后加属性值

属性值作用
flex-start 起点开始依次排列
flex-end 终点开始依次排列
center 沿侧轴居中排列
stretch 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器

记忆：
1.两侧没缝隙是 between
2.缝隙一样大是 evenly
3.2倍缝隙是 around

可以通过flex布局让子盒子在父盒子中垂直水平居中
.father {
width: 500px;
height: 500px;
background-color: pink;
/* 设置为flex布局 /
display: flex;
/ 主轴水平居中 /
justify-content: center;
/ 侧轴垂直居中 */
align-items: center;
}

.son {
width: 200px;
height: 200px;
background-color: purple;
}

伸缩比:
简单来讲就是将父盒子剩余的部分分成几份让子盒子来占去几份
语法:flex: 1;

例:比如有一个父盒子里面有三个子盒子，每个子盒子写 flex：1；此时每个子盒子各占三分之一。
.father {
display: flex;
height: 300px;
background-color: pink;
}

.father div {
/* 每个孩子各占1份 /
flex: 1;
/ 默认子盒子和父亲一样高 */
background: purple;
}