CSS--五种经典布局

会用到 Flex 语法 和 Grid 语法。

参考链接：阮一峰--《只要一行代码，实现五种CSS经典布局》

---

 

一、空间居中布局

// html
<div class="container">
  <div class="item">1</div>
</div>

// CSS
.container {
  display: grid;
  place-items: center;　　　　// 是简写： place-items：<align-items>垂直位置  <justify-items>水平位置
  
  background: lightblue;
  width: 600px;
  height: 600px; 
}
.item {
  border: 1px solid;
  border-radius: 8px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 2rem;
  color: #fff;
}

---

 

二、并列式布局

Flex 布局比较方便，内容居中（justify-content）可换行（flex-wrap）

flex：<flex-grow> <flex-shrink> <flex-basis>

详细看：bilibili-flex 或 Flex 语法

---

三、两栏式布局

两栏布局就是一个边栏，一个主栏。

使用 Grid 实现很容易

.container {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

---

四、三明治布局

三明治布局是指，页面在垂直方向上，分为：页眉，内容区，页脚

.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

上面代码写在容器上面，指定采用 Grid 布局。核心代码是grid-template-rows那一行，指定垂直高度怎么划分，这里是从上到下分成三部分。第一部分（页眉）和第三部分（页脚）的高度都为auto，即本来的内容高度；第二部分（内容区）的高度为1fr，即剩余的所有高度，这可以保证页脚始终在容器的底部。

---

五、圣杯布局