几种常见的布局场景
1. 瀑布流布局(瀑布流式布局)
特点：参差不齐的排列方式，布局的元素等宽，当元素占满一行时，后续布局的元素依次放置在最小高度的列上，父容器的高度取列表的最大值
布局效果:
js实现
实现思路： (1) 计算需要布局的列数：文档宽度/图片宽度(outerWidth等) (2) 创建一个数组（长度为列数），数组元素为每一列已布局元素的总高度 (3) 将未布置的元素，依次布置到高度最小的那一列，然后更新这一列的高度
tips:
- 浏览器窗口尺寸变化时，将图片重新排列
- 图片尺寸计算时注意maigin、border等属性
css实现
css布局无法实现真正意义上的瀑布流布局
-
flex布局 主要实现思路： 容器元素设置横向布局，子元素设置纵向布局
-
grid布局 主要实现思路： 网格容器：
display: grid; grid-template-columns: repeat(auto-fill,minmax(200, 1fr)); grid-gap: 10px; grid-auto-flow: row dense; grid-auto-rows: auto;
网格项目：grid-row: 2; (跨域几个网格) -
Multi-columns布局(多列布局、分栏布局) 主要实现思路： 容器元素设置以下属性： column-count: 3; column-width: 240px; column-gap: 20px; 子元素设置: break-inside: aviod;
瀑布流布局的优点：
- 降低页面复杂度，节省空间
- 结合懒加载，增强用户体验感，使用js实现
几种常用的布局方式
a. 响应式布局
一次开发、多端使用，多用于展示性网站
移动端常用解决方案
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-sacle=1.0, minimum-scale=1.0" >
实现方式：
（1） 百分比
（2） 媒体查询
一种通用方式：为窄屏设备应用单栏布局，为宽屏设备应用多栏布局；即采用移动优先设计。
（3） em、rem、vw、vh布局
rem为相对窗口的尺寸
浏览器端指可视窗口
移动端指布局视口
// 简化根元素font-size值的转化
font-size: 62.5%; // 等价于font-size: 10px;
1rem = 10px;
特别地：
vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。
vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
弊端：
- 仅适用布局、信息、框架并不复杂的部门类型网站
- 兼容各种设备工作量大，效率低下
- 代码累赘，会出现隐藏无用的元素，加载时间加长
- 多方面因素影响而达不到最佳效果
b. 多栏式布局
（1）两栏布局
- float
- flex
（2）三栏布局
- float + margin
- absolute + margin
- float + 负margin
- flex
- grid
c. flex布局
轴线布局
// 默认值
flex: 0 1 auto;
flex: 1 // flex: 1 1 0%
flex: 2 // flex: 2 1 0%
flex: auto // flex: 1 1 auto
flex: none // flex: 0 0 auto，常用于固定尺寸不伸缩
应用场景：
- 多栏自适应布局
- 移动端、小程序页面开发
- 实现水平垂直居中效果
d. grid布局
网格布局、行列布局，最强大的布局方案
grid布局与弹性布局的比较:
- grid布局基于二维实现，flex布局基于一维布局（只按行或者按列布局）
- grid布局从布局入手（元素内容按照网格排列自动放置），flex布局从内容入手（内容大小决定元素占用的空间）
- flex移动端支持度较grid更友好
