本文将详细介绍如何利用HTML和CSS的Flexbox布局，创建包含圆形或方形元素及配套文本的灵活布局。教程涵盖了Flexbox的核心属性，如display: flex、justify-content和align-items，以实现水平排列。同时，还将讲解如何通过媒体查询（Media Queries）实现响应式设计，使布局在不同屏幕尺寸下自动调整为垂直堆叠，确保用户体验。
1. 引言：Flexbox布局的优势
在现代网页开发中，Flexbox（弹性盒子）模块提供了一种高效的方式来布局、对齐和分配容器中项目空间。它使得复杂布局的实现变得简单，尤其适用于创建一维布局（行或列）。本教程将利用Flexbox的强大功能，构建一个包含圆形或方形图形及其描述文本的布局，并确保其在不同设备上的响应性。
2. HTML结构搭建
首先，我们需要定义清晰的HTML结构。我们将使用一个主容器来包裹一行中的所有元素组，每个元素组又包含一个图形（可以是div或img）和一个段落文本。
@@##@@这是一段关于猫咪的描述文本。
cqcms通用企业建站(PC+wap)2.9下载cqcms通用企业建站介绍 苍穹企业网站管理系统(CQCMS)软件是国产PHP网站内容管理系统：CQcms内容管理系统 ，它将成为您轻松建站的利器。模板全部使用文件形式保存，对用户设计模板、网站升级转移均提供很大的便利，健壮的模板标签为站长DIY自己的网站提供了强有力的支持。MVC框架，自定义标签，模板文件修改非常方便，PC+WAP响应式布局，一个域名，自动识别终端，一个后台同时管理PC和wap。
这是一段纯色圆形的描述文本。
这是一段纯色圆形的描述文本。
- .row：作为Flex容器，负责横向排列其子元素（.circle-wrapper）。
- .circle-wrapper：每个独立的元素组，内部包含一个图形和一段文本。它自身也是一个Flex容器，但其子元素是垂直排列的。
- .circle：代表圆形或方形的图形区域，可以是一个div或包含img标签的div。
- p：图形下方的描述文本。
3. CSS样式实现：Flexbox核心属性
接下来，我们将应用CSS样式来布局这些元素，并使用Flexbox属性进行精确控制。
/* 基础样式 */
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
/* 1. 容器 (.row) 的 Flexbox 设置 */
.row {
display: flex; /* 激活Flexbox布局 */
justify-content: space-around; /* 子项目在主轴（水平）上均匀分布，两端留有空间 */
margin-bottom: 60px; /* 行之间的垂直间距 */
flex-wrap: wrap; /* 允许项目在空间不足时自动换行 */
gap: 20px; /* 项目之间的间距（现代Flexbox属性） */
}
/* 2. 单个项目包裹器 (.circle-wrapper) 的 Flexbox 设置 */
.circle-wrapper {
display: flex; /* 激活Flexbox布局 */
flex-direction: column; /* 内部元素（图形和文本）垂直堆叠 */
align-items: center; /* 内部元素在交叉轴（水平）居中对齐 */
text-align: center; /* 确保文本居中 */
background-color: white;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
flex-shrink: 0; /* 防止项目在空间不足时过度缩小 */
min-width: 200px; /* 设置最小宽度，避免内容过窄 */
}
/* 3. 图形 (.circle) 的样式 */
.circle {
width: 100px;
height: 100px;
background: #ff6347; /* 默认纯色背景 */
border-radius: 50%; /* 制作圆形 */
display: block; /* 确保元素占据独立空间，消除图片底部空白 */
margin-bottom: 15px; /* 与下方文本的间距 */
overflow: hidden; /* 隐藏超出圆形区域的内容，尤其用于图片 */
}
/* 如果 .circle 内部包含图片 */
.circle img {
width: 100%;
height: 100%;
object-fit: cover; /* 确保图片填充整个圆形区域，并裁剪多余部分 */
border-radius: 50%; /* 确保图片自身也是圆形 */
}
/* 4. 文本 (p) 的样式 */
.circle-wrapper p {
padding: 10px 15px;
background: #e0e0e0;
border-radius: 5px;
color: #333;
font-size: 14px;
line-height: 1.5;
margin: 0; /* 移除p标签默认外边距 */
}- .row: 设定为display: flex使其子元素水平排列。justify-content: space-around确保了子元素在主轴上的均匀分布，并在两端留有空白。flex-wrap: wrap是实现响应性的关键，当空间不足时，项目会自动换行。
- .circle-wrapper: 同样设定为display: flex，但flex-direction: column使其内部的图形和文本垂直堆叠。align-items: center则将这些垂直堆叠的元素在交叉轴（即水平方向）上居中。
- .circle: 通过设置width、height和border-radius: 50%来创建圆形。如果需要方形，则移除border-radius或设置为0。overflow: hidden和object-fit: cover对于内部包含图片的圆形尤其重要，它们确保图片完美填充圆形区域。
4. 实现响应式设计：媒体查询
为了让布局在不同屏幕尺寸下都能良好展示，我们需要使用媒体查询（Media Queries）。当屏幕宽度小于某个阈值时，我们将改变主容器的flex-direction，使其子元素从水平排列变为垂直堆叠。
/* 媒体查询：针对中等屏幕设备，例如平板电脑 */
@media (max-width: 768px) {
.row {
flex-direction: column; /* 在小屏幕上，主轴变为垂直方向 */
align-items: center; /* 容器内的项目在交叉轴（水平）居中 */
gap: 30px; /* 增加垂直间距 */
}
.circle-wrapper {
width: 80%; /* 让每个项目占据大部分宽度 */
max-width: 300px
