三十的博客

Flexbox 进阶实战：从入门到项目实践 01

本文内容基于 AI 生成结果整理，可能包含不准确信息，仅供参考使用。
发布时间
阅读量 加载中...

项目一 响应式图片画廊

目标效果： 创建一个在不同屏幕尺寸下都能良好显示的图片画廊，小屏幕时单列显示，中等屏幕两列，大屏幕三列。

效果预览：

此演示仅在桌面端浏览器中可用

代码实现：

html 
<!DOCTYPE html>
<html>
  <head>
    <style>
      .gallery {
        display: flex;
        flex-wrap: wrap;
        gap: 15px; /* 项目间距 */
        padding: 15px;
      }

      .gallery-item {
        flex: 1 1 300px; /* 基础宽度300px，可伸缩 */
        min-width: 0; /* 防止内容溢出 */
      }

      .gallery-item img {
        width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }

      /* 中等屏幕：两列 */
      @media (max-width: 800px) {
        .gallery-item {
          flex-basis: calc(50% - 15px);
        }
      }

      /* 小屏幕：单列 */
      @media (max-width: 500px) {
        .gallery-item {
          flex-basis: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="gallery">
      <div class="gallery-item">
        <img src="https://picsum.photos/600/400?random=1" alt="图片1" />
      </div>
      <div class="gallery-item">
        <img src="https://picsum.photos/600/400?random=2" alt="图片2" />
      </div>
      <div class="gallery-item">
        <img src="https://picsum.photos/600/400?random=3" alt="图片3" />
      </div>
      <div class="gallery-item">
        <img src="https://picsum.photos/600/400?random=4" alt="图片4" />
      </div>
      <div class="gallery-item">
        <img src="https://picsum.photos/600/400?random=5" alt="图片5" />
      </div>
      <div class="gallery-item">
        <img src="https://picsum.photos/600/400?random=6" alt="图片6" />
      </div>
    </div>
  </body>
</html>

关键技巧:

项目二 卡片布局设计

目标效果: 创建一组高度一致、内容对齐的卡片，卡片内部也使用 Flexbox 布局。

效果预览：

此演示仅在桌面端浏览器中可用

代码实现：

html 
<!DOCTYPE html>
<html>
  <head>
    <style>
      .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding: 20px;
        justify-content: center;
      }

      .card {
        flex: 0 1 300px;
        display: flex;
        flex-direction: column;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }

      .card-img {
        height: 180px;
        background-color: #f5f5f5;
      }

      .card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .card-content {
        flex: 1; /* 内容区域填充剩余空间 */
        padding: 15px;
        display: flex;
        flex-direction: column;
      }

      .card-title {
        font-size: 1.2rem;
        margin-bottom: 10px;
      }

      .card-desc {
        flex: 1; /* 描述区域填充内容区剩余空间 */
        margin-bottom: 15px;
        color: #666;
      }

      .card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        background-color: #f9f9f9;
        border-top: 1px solid #eee;
      }

      .btn {
        padding: 6px 12px;
        background-color: #4caf50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="card-container">
      <div class="card">
        <div class="card-img">
          <img src="https://picsum.photos/300/180?random=1" alt="卡片图片" />
        </div>
        <div class="card-content">
          <h3 class="card-title">产品标题</h3>
          <p class="card-desc">
            这里是产品的描述内容，可以有多行文字，卡片高度会自动保持一致。
          </p>
        </div>
        <div class="card-footer">
          <span>$99.99</span>
          <button class="btn">加入购物车</button>
        </div>
      </div>
      <!-- 复制更多卡片... -->
    </div>
  </body>
</html>

关键技巧:

项目三 圣杯布局实现

目标效果: 创建经典的圣杯布局（页眉、页脚、固定侧边栏和流动主内容区），完全使用 Flexbox 实现。

效果预览：

此演示仅在桌面端浏览器中可用

代码实现：

html 
<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: Arial, sans-serif;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }

      header,
      footer {
        background-color: #333;
        color: white;
        padding: 20px;
        text-align: center;
      }

      .main-content {
        flex: 1;
        display: flex;
      }

      .sidebar {
        flex: 0 0 250px;
        background-color: #f4f4f4;
        padding: 20px;
      }

      .content {
        flex: 1;
        padding: 20px;
        background-color: #fff;
      }

      footer {
        margin-top: auto;
      }

      /* 响应式调整 */
      @media (max-width: 768px) {
        .main-content {
          flex-direction: column;
        }

        .sidebar {
          flex-basis: auto;
          order: 2; /* 侧边栏移动到底部 */
        }
      }
    </style>
  </head>
  <body>
    <header>
      <h1>网站标题</h1>
    </header>

    <div class="main-content">
      <main class="content">
        <h2>主内容区</h2>
        <p>
          这里是网站的主要内容区域。Flexbox 让我们可以轻松创建这种经典布局。
        </p>
        <p>尝试调整浏览器窗口大小，查看响应式效果。</p>
      </main>

      <aside class="sidebar">
        <h3>侧边栏</h3>
        <ul>
          <li>导航链接1</li>
          <li>导航链接2</li>
          <li>导航链接3</li>
        </ul>
      </aside>
    </div>

    <footer>
      <p>© 2023 网站底部</p>
    </footer>
  </body>
</html>

关键技巧:
#Flex #Layout #CSS基础