css 流式布局 九宫格布局

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

优点：

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

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

根元素的高度可以写为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;
        }
 

这篇好文章是转载于：学新通技术网