如何创建 Flexbox 弹性盒子网格？

Flexbox 是 CSS 中一个强大的布局模块，旨在提供一种高效的方式来对齐容器内的项目并分配空间。它在创建灵活且响应式的网格布局时特别有用。

创建 Flexbox 网格的不同方法：

目录

• 基础 Flexbox 网格
• 响应式 Flexbox 网格
• 嵌套 Flexbox 网格
• 对齐项目

基础 Flexbox 网格

使用基础 flexbox 网格，我们可以设置一个带有 display: flex; 属性的容器，并为子元素定义 flex 属性以均匀分配空间。

• 在 HTML 文档中使用
  元素为容器和项目创建网页的基本结构。
• 将容器的 display 属性设置为 flex，并使用 flex-wrap: wrap 启用换行。
• 为子元素定义 flex 属性，使用 flex: 1 1 200px; 均匀分配空间。

语法:

.container {  
display: flex;  
flex-wrap: wrap;  
gap: 10px; 
}
.item {  
flex: 1 1 200px; 
}

示例： 此 HTML 代码使用 Flexbox 创建了一个响应式网格，其中的项目在换行时会留有间隙，并根据可用空间调整其大小。

HTML


CODEBLOCK_851d83b8

输出:

响应式 Flexbox 网格

为了使网格具有响应性，我们可以使用媒体查询来根据不同的屏幕尺寸调整 flex 属性。

• 在 HTML 文档中使用
  元素为容器和项目创建网页的基本结构。
• 将容器的 display 属性设置为 flex，并使用 flex-wrap: wrap 启用换行。
• 使用媒体查询根据不同的屏幕尺寸调整 flex 属性。

语法:

.container {  
display: flex;  
flex-wrap: wrap;  
gap: 10px;
}
.item {  
flex: 1 1 200px;
}
@media (max-width: 600px) {  
.item {    
flex: 1 1 100%;  
  }
}

示例： 这展示了一个响应式的 flexbox 网格布局，其中的项目会根据屏幕宽度调整其大小和排列方式。

HTML


CODEBLOCK_dd9e3e30

输出:

嵌套 Flexbox 网格

使用嵌套 Flexbox 网格，我们可以将一个 Flexbox 容器放置在另一个 Flexbox 容器内，从而创建复杂的布局。

• 在 HTML 文档中，使用嵌套的
  元素为网页创建基本结构，分别用于外部容器、内部容器以及项目。
• 将外部容器和内部容器的 display 属性都设置为 flex。
• 为两个容器都启用 flex-wrap: wrap 换行，并为子元素定义 flex 属性。

语法:

.outer-container {  
display: flex;
flex-wrap: wrap;  
gap: 20px;
}
.inner-container {  
display: flex;  
flex-wrap: wrap;  
gap: 10px;  
flex: 1 1 300px;
}
.item {  
flex: 1 1 100px;
}

示例： 这展示了嵌套的 flexbox 布局，其中 INLINECODE5ed87380 包含多个 INLINECODE528ba284 元素，每个内部容器都有自己的 .item 元素网格。

HTML


“

.outer-container {

display: flex;

flex-wrap: wrap;

gap: 20px;

}

.inner-container {

display: flex;

flex-wrap: wrap;