本文共 1721 字，大约阅读时间需要 5 分钟。

Flex与Grid布局基础入门

Flexbox和Grid是现代CSS布局系统的核心技术，能够帮助开发者高效地创建响应式布局。Flex（Flexbox）适用于一维布局，而Grid（Grid）适用于二维布局。以下将从基础概念到实际应用详细说明这两种布局方式。

1. 容器（Container）

容器是布局的基础，通常使用display: grid或display: flex来启用布局功能。以下是使用Grid布局的示例代码：

.container {
  display: grid;
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 60px 300px 100px;
}

此外，也可以通过份数划分实现平均布局：

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

2. 项目（Item）

项目可以通过指定行和列的范围来定义。以下是使用grid-row-start和grid-column-start的示例：

.a {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 6;
}

3. 平均布局

以下是一个典型的平均布局示例，适用于图片或卡片布局：

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 800px;
  border: 1px solid red;
  grid-gap: 12px;
}
.image {
  width: 191px;
  height: 191px;
  background: grey;
}

4. 高级技巧：Grid-Template-Areas

Grid-Template-Areas是Grid布局的高级功能，可以通过文字定义布局区域。以下是一个常见的页面框架布局示例：

.container {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 60px auto 60px;
  grid-template-columns: 100px auto 100px;
  grid-template-areas:
    "header header header"
    "aside main ad"
    "footer . footer";
}

5. 间隙（Gap）

间隙用于控制布局之间的空隙。以下是设置竖直和水平间隙的示例：

.container {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

案例：不规则布局

以下是一个复杂布局的示例，展示了Flex和Grid的实际应用：

.demo {
  display: inline-grid;
  border: 1px solid red;
  grid-template-rows: 240px repeat(4, 120px);
  grid-template-columns: 250px 250px;
  grid-template-areas:
    "big mid1"
    "big mid2"
    "sm1 mid2"
    "sm2 mid3"
    "sm3 mid3";
}
.image {
  grid-area: inherit;
  border: 1px solid red;
}

通过合理搭建Grid布局框架，可以轻松实现复杂的页面布局设计。无论是导航栏、侧边栏，还是主内容区域，都可以通过Grid布局实现精确的控制。

转载地址：http://xfvi.baihongyu.com/