本文共 1669 字，大约阅读时间需要 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/