使用Flexbox和CSS实现响应式圆形与方形布局-html教程-PHP中文网

使用Flexbox和CSS实现响应式圆形与方形布局

聖光之護

发布： 2025-12-08 17:11:02

原创

305人浏览过

使用flexbox和css实现响应式圆形与方形布局

本文将详细介绍如何利用HTML和CSS的Flexbox布局，创建包含圆形或方形元素及配套文本的灵活布局。教程涵盖了Flexbox的核心属性，如display: flex、justify-content和align-items，以实现水平排列。同时，还将讲解如何通过媒体查询（Media Queries）实现响应式设计，使布局在不同屏幕尺寸下自动调整为垂直堆叠，确保用户体验。

1. 引言：Flexbox布局的优势

在现代网页开发中，Flexbox（弹性盒子）模块提供了一种高效的方式来布局、对齐和分配容器中项目空间。它使得复杂布局的实现变得简单，尤其适用于创建一维布局（行或列）。本教程将利用Flexbox的强大功能，构建一个包含圆形或方形图形及其描述文本的布局，并确保其在不同设备上的响应性。

2. HTML结构搭建

首先，我们需要定义清晰的HTML结构。我们将使用一个主容器来包裹一行中的所有元素组，每个元素组又包含一个图形（可以是div或img）和一个段落文本。

<div class="row">
  <!-- 第一个元素组 -->
  <div class="circle-wrapper">
    <div class="circle">
      @@##@@
    </div>
    <p>这是一段关于船只的描述文本。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
  </div>

  <!-- 第二个元素组 -->
  <div class="circle-wrapper">
    <div class="circle">
      @@##@@
    </div>
    <p>这是一段关于猫咪的描述文本。</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/2534">
                            <img src="https://img.php.cn/upload/webcode/000/000/000/5a2a2bf92aa08363.png" alt="侧栏菜单模块化响应式模板">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/2534">侧栏菜单模块化响应式模板</a>
                            <p>响应式网站设计(Responsive Web design)的理念是：
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="侧栏菜单模块化响应式模板">
                                <span>58</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/2534" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="侧栏菜单模块化响应式模板">
                        </a>
                    </div>
                
  </div>
</div>

<div class="row">
  <!-- 纯色圆形示例 -->
  <div class="circle-wrapper">
    <div class="circle"></div>
    <p>这是一段纯色圆形的描述文本。</p>
  </div>

  <!-- 另一个纯色圆形示例 -->
  <div class="circle-wrapper">
    <div class="circle"></div>
    <p>这是一段纯色圆形的描述文本。</p>
  </div>
</div>

登录后复制

.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

登录后复制