常见的css布局方案

几种常见的布局场景

1. 瀑布流布局(瀑布流式布局)

特点：参差不齐的排列方式，布局的元素等宽，当元素占满一行时，后续布局的元素依次放置在最小高度的列上，父容器的高度取列表的最大值

布局效果:

js实现

实现思路：(1) 计算需要布局的列数：文档宽度/图片宽度(outerWidth等)(2) 创建一个数组（长度为列数），数组元素为每一列已布局元素的总高度(3) 将未布置的元素，依次布置到高度最小的那一列，然后更新这一列的高度

tips:

• 浏览器窗口尺寸变化时，将图片重新排列
• 图片尺寸计算时注意maigin、border等属性

css实现

css布局无法实现真正意义上的瀑布流布局

1. flex布局主要实现思路：容器元素设置横向布局，子元素设置纵向布局
2. 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; (跨域几个网格)
3. Multi-columns布局(多列布局、分栏布局)主要实现思路：容器元素设置以下属性：column-count: 3;column-width: 240px;column-gap: 20px;子元素设置: break-inside: aviod;

瀑布流布局的优点：

• 降低页面复杂度，节省空间
• 结合懒加载，增强用户体验感，使用js实现

2. 水平垂直居中

(1).parent{display:table-cell; vertical-align:middle; text-align:center;}.child{display:inline-block;}(2) 绝对定位.parent{position:relative;}.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}(3) flex.parent{display:flex;justify-content:center;align-items:center;}

3. div实现高度根据宽度自适应

// 以宽高1：1为例
(1) padding实现
padding-bottom: 50%; // 上下内边距与左右内边距一致，百分数会相对于父元素宽度设置
height: 0;
width: 50%;

(2)vw实现
width: 50vw;
height: 50vw;

(3)js实现(不推荐)
div{width:50%;}
window.onresize = () => {div.height(div.width);}

(4)zoom实现(ie专属)
width: 50%;
zoom: 1;

(5) float实现

几种常用的布局方式

a. 响应式布局

• meta标签

<meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />

• 媒体查询

b. rem布局

移动端实现自适应所有分辨率

c. 流式布局

百分比布局

d. flex布局

e. grid布局

grid布局与弹性布局的比较:

• grid布局基于二维实现，flex布局基于一维布局（只按行或者按列布局）
• grid布局从布局入手（元素内容按照网格排列自动放置），flex布局从内容入手（内容大小决定元素占用的空间）

图片素材Grid布局