🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSS模板：display: flex;

📝 使用用途

此模板用于将多个元素（如盒子、按钮）横向排列，适合卡片式布局、并排按钮或响应式网页设计。

📘 说明

给父元素设置 display: flex; 后，其子元素会自动水平排列。可通过 gap 控制元素间距。示例中使用 .flex-container 作为容器，.flex-box 作为每个盒子。

✅ 示例

盒子 1
盒子 2
盒子 3

📄 代码（片段）

<style>
  .flex-container {
    display: flex;
    gap: 1rem;
  }
  .flex-box {
    flex: 1;
    padding: 1rem;
    background: #f2f2f2;
    border: 1px solid #ccc;
    text-align: center;
  }
</style>

<div class="flex-container">
  <div class="flex-box">盒子 1</div>
  <div class="flex-box">盒子 2</div>
  <div class="flex-box">盒子 3</div>
</div>

📦 代码（完整 HTML）

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Flex 布局示例</title>
  <style>
    .flex-container {
      display: flex;
      gap: 1rem;
    }
    .flex-box {
      flex: 1;
      padding: 1rem;
      background: #f2f2f2;
      border: 1px solid #ccc;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-box">盒子 1</div>
    <div class="flex-box">盒子 2</div>
    <div class="flex-box">盒子 3</div>
  </div>
</body>
</html>
已复制！

🧩 Flexbox 布局的实用技巧

display: flex 是现代 Web 布局中最强大的 CSS 属性之一。它可以实现直观的元素排列，非常适合响应式设计。

🎯 基本对齐技巧

使用 justify-content 可以控制水平方向的对齐方式，align-items 用于控制垂直方向的对齐。例如，justify-content: space-between 可将元素平均分布并对齐到两端。添加 flex-wrap: wrap 后，在屏幕变窄时元素会自动换行。

✨ 高级布局调整

通过子元素的 flex 属性可以精确控制比例。使用 flex: 2 和 flex: 1 的组合，可以实现 2:1 的比例布局。还可以使用 order 属性在不改变 HTML 结构的前提下更改元素的显示顺序。

📱 响应式设计要点

在移动端显示时，可以使用 flex-direction: column 切换为垂直排列。配合媒体查询（media query）使用，可以为不同设备实现最佳布局。同时，gap 的值也建议根据屏幕宽度进行调整。

Flexbox 功能强大，但对于非常复杂的布局，建议考虑使用 Grid 布局。此外，如果需要兼容旧版浏览器，应添加如 display: -webkit-box 等供应商前缀。

相关模板