布局

 

网格布局

网格线"（grid line）

n行有n + 1根水平网格线，m列有m + 1根垂直网格线

容器元素都是块级元素，但也可以设成行内元素

div {

display: inline-grid;

}

.container {

display: grid;

grid-template-columns: 100px 100px 100px;//也可以使用百分比。 

grid-template-rows: 100px 100px 100px;

} 

重复写同样的值  ，可以使用repeat()函数

.container {

display: grid;

grid-template-columns: repeat(3, 33.33%);   /3  是重复的次数

}

fr 关键字

片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

 

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

.container {

grid-row-gap: 20px;

grid-column-gap: 20px;

}

 

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，

table布局

flex布局

.      flex: flex-grow、flex-shrink 、flex-basis缩写  flex: 1 1 auto;