只要一行代码，实现五种css经典布局

阮一峰的flex布局讲解： www.ruanyifeng.com/blog/2015/0… grid布局讲解： www.ruanyifeng.com/blog/2019/0…

1.居中：

.container{ display:grid; place-items:center } place-items:start 左上角

2.并列式布局：

.container{ display:flex; flex-wrap:wrap; justify-content:center; } .item{ flex:0 1 150px; margin:5px; }

flex: 0 1 150px;的意思就是，项目的初始宽度是150px，且不可以扩大，但是当容器宽度不足150px时，项目可以缩小。 如果写成flex: 1 1 150px;，就表示项目始终会占满所有宽度。

3.两栏式布局：

.container { display: grid; grid-template-columns:minmax(150px,25%) 1fr; } 上面代码中，grid-template-columns指定页面分成两列。第一列的宽度是minmax(150px, 25%)，即最小宽度为150px，最大宽度为总宽度的25%；第二列为1fr，即所有剩余宽度。

4.三明治布局 三明治布局指的是，页面在垂直方向上，分成三部分：页眉、内容区、页脚。

.container{ display:grid; grid-template-rows:auto 1fr auto;}
第一部分（页眉）和第三部分（页脚）的高度都为auto，即本来的内容高度；第二部分（内容区）的高度为1fr，即剩余的所有高度，这可以保证页脚始终在容器的底部。

5.圣杯布局 它将页面分成五个部分，除了页眉和页脚，内容区分成左边栏、主栏、右边栏。

.container{display:grid;grid-template:auto 1fr auto / auto 1fr auto } 核心代码是grid-template属性那一行，它是两个属性grid-template-rows（垂直方向）和grid-template-columns（水平方向）的简写形式。 grid-template: /