流式布局，也叫百分比布局，是移动端开发中经常使用的布局方式之一。

优点：

当页面宽度发生变化时，页面布局会随着宽度的变化而变化。 适合移动端网页的制作。

高度写死，宽度用%来表示

根元素的高度可以写为min-height：calc（100vh），根元素宽度为100%（或者设置其min-width和max-width)，然后它的子元素的高度就用px来表示即可，宽度用百分比来表示

  九宫格布局

1，flex和calc

父元素设置display为flex，flex-warp为warp，子元素设置其宽度为calc（100%/3)

.father{             width: 100%;             display: flex;             /*换行*/             flex-wrap: wrap;         }           .son {             width: calc(calc(100% / 3) - 10px);             height: 100px;             margin: 5px;             box-sizing: border-box;             border: 1px solid black;         }

2,网格布局

grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高，fr 关键字相当于flex-grow，grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式。

    .fathe {             display: grid;             /* //定义网格中的行和列 ,1fr,每行各占3分之1*/             grid-template-columns: 1fr 1fr 1fr;             grid-template-rows: 100px 100px 100px;             grid-gap: 10px;             padding: 10px;         }           .son {             border: 1px solid black;         }  

精彩文章

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：