Flex 布局语法教程

作者likuolei

Flex 布局语法教程（2025年中文讲解）

Flex 布局（Flexible Box Layout，弹性盒布局）是 CSS3 提供的一种强大布局模型，用于创建灵活、响应式的页面布局。相比传统布局（如浮动、定位），Flex 布局更简单、直观，广泛应用于 Web 开发（React、Vue 等）、移动端 WebView，以及跨平台框架（如 Flutter 的类似布局）。2025年，Flex 仍是现代 Web 开发的主流布局方式，结合 CSS Grid 和 Tailwind CSS，应用在动态 UI 和响应式设计中。本教程详细讲解 Flex 布局的语法、核心属性和实践，基于 MDN、W3Schools 和 CSDN，适合初学者和开发者。建议用浏览器开发者工具（F12）或 CodePen 练习。

一、Flex 布局概览（必知）

  • 定义：Flex 布局是一种一维布局模型，通过设置容器和子项的属性，控制元素在主轴或交叉轴上的排列。
  • 核心概念：
  • Flex 容器：应用 display: flex 的元素，控制子项布局。
  • Flex 子项：容器内的直接子元素，受容器属性影响。
  • 主轴与交叉轴：主轴由 flex-direction 定义，交叉轴垂直于主轴。
  • 特点：
  • 灵活性：支持动态调整间距、对齐和顺序。
  • 响应式：适配不同屏幕大小，简化移动端布局。
  • 浏览器支持：2025年，所有主流浏览器（Chrome、Firefox、Safari、Edge）完全支持。
  • 2025年趋势：
  • Flex 结合 Grid 布局，处理复杂 UI（如卡片列表、网格）。
  • Tailwind CSS 的 Flex 工具类（如 flex、justify-between）简化开发。
  • 在 Android WebView 和 KMP 项目中，Flex 优化移动端体验。

二、核心语法与属性（必会）

以下按 Flex 容器和子项属性讲解，包含示例，直接在 HTML/CSS 文件或 CodePen 可运行。

1. Flex 容器属性
  • 启用 Flex 布局：
  .container {
      display: flex; /* 或 inline-flex（行内 Flex） */
  }
  • 常用容器属性： 属性 描述 值 flex-direction 定义主轴方向 row（默认，水平）、column（垂直）、row-reverse、column-reverse flex-wrap 是否换行 nowrap（默认）、wrap（换行）、wrap-reverse justify-content 主轴对齐 flex-start（默认）、flex-end、center、space-between、space-around、space-evenly align-items 交叉轴对齐 stretch（默认）、flex-start、flex-end、center、baseline align-content 多行交叉轴对齐（需 flex-wrap: wrap） 同 justify-content gap 子项间距 10px、1rem 2rem
  • 示例（水平居中布局）：
  <!DOCTYPE html>
  <html>
  <head>
      <style>
          .container {
              display: flex;
              justify-content: center;
              align-items: center;
              height: 100vh;
              gap: 10px;
          }
          .item {
              background: #3498db;
              color: white;
              padding: 20px;
          }
      </style>
  </head>
  <body>
      <div class="container">
          <div class="item">Item 1</div>
          <div class="item">Item 2</div>
          <div class="item">Item 3</div>
      </div>
  </body>
  </html>

效果：三个子项水平居中排列，间距 10px。

  • 示例（垂直布局 + 换行）：
  .container {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      height: 200px;
      gap: 10px;
  }
  .item {
      width: 100px;
      background: #2ecc71;
      color: white;
      padding: 10px;
  }

效果：子项垂直排列，超出 200px 高度时换行。

2. Flex 子项属性
  • 常用子项属性： 属性 描述 值 flex 复合属性（grow、shrink、basis） 1（简写）、1 1 0% flex-grow 扩展比例 0（默认，不扩展）、1（按比例扩展） flex-shrink 收缩比例 1（默认，可收缩）、0（不收缩） flex-basis 初始大小 auto、100px、百分比 align-self 单独交叉轴对齐 同 align-items order 排列顺序 0（默认）、整数（如 -1、1）
  • 示例（弹性分配空间）：
  <!DOCTYPE html>
  <html>
  <head>
      <style>
          .container {
              display: flex;
              width: 600px;
              height: 100px;
              background: #ecf0f1;
          }
          .item1 { flex: 1; background: #e74c3c; }
          .item2 { flex: 2; background: #3498db; }
          .item3 { flex: 1; background: #2ecc71; }
      </style>
  </head>
  <body>
      <div class="container">
          <div class="item1">1</div>
          <div class="item2">2</div>
          <div class="item3">3</div>
      </div>
  </body>
  </html>

效果：item2 宽度是 item1 和 item3 的两倍（2:1:1）。

  • 示例（自定义顺序和对齐）：
  .container {
      display: flex;
      height: 100px;
  }
  .item1 { order: 2; align-self: flex-end; background: #e74c3c; }
  .item2 { order: 1; background: #3498db; }
  .item3 { order: 3; background: #2ecc71; }

效果：子项按 order 排序（item2 → item1 → item3），item1 靠交叉轴底部。

3. 响应式布局
  • 结合媒体查询：
  .container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
  }
  .item {
      flex: 1 1 200px; /* 至少 200px，均分剩余空间 */
  }
  @media (max-width: 600px) {
      .item {
          flex: 1 1 100%; /* 小屏幕占满宽度 */
      }
  }

效果：大屏幕多列布局，小屏幕单列堆叠。

三、实践示例（综合应用）

  1. 卡片布局（Web 示例）：
<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            padding: 20px;
        }
        .card {
            flex: 1 1 300px;
            background: #f1c40f;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">Card 1</div>
        <div class="card">Card 2</div>
        <div class="card">Card 3</div>
    </div>
</body>
</html>


功能：响应式卡片布局，自动换行，每张卡片最小 300px。

  1. 导航栏（React + Tailwind 示例）：
import React from 'react';

function NavBar() {
    return (
        <nav className="flex justify-between items-center bg-blue-500 text-white p-4">
            <div className="text-lg font-bold">Logo</div>
            <ul className="flex gap-4">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    );
}
export default NavBar;


功能：使用 Tailwind CSS 实现水平导航栏，Logo 居左，菜单项居右。

  1. Android WebView 集成：
import android.os.Bundle
import android.webkit.WebView
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val webView: WebView = findViewById(R.id.webView)
        webView.settings.javaScriptEnabled = true
        webView.loadData("""
            <html>
            <head>
                <style>
                    .container {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 10px;
                        padding: 10px;
                    }
                    .item {
                        flex: 1 1 150px;
                        background: #3498db;
                        color: white;
                        padding: 10px;
                    }
                </style>
            </head>
            <body>
                <div class="container">
                    <div class="item">Item 1</div>
                    <div class="item">Item 2</div>
                    <div class="item">Item 3</div>
                </div>
            </body>
            </html>
        """, "text/html", "UTF-8")
    }
}


布局（res/layout/activity_main.xml）：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>


功能：在 Android WebView 中显示 Flex 布局的响应式卡片。

四、注意事项与最佳实践

  1. Flex vs Grid：
  • Flex：适合一维布局（如导航、卡片列表）。
  • Grid：适合二维布局（如表格、复杂网格）。
  • 结合使用：
    css .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card { display: flex; align-items: center; justify-content: center; }
  1. 响应式设计：
  • 使用 flex-wrap: wrap 和媒体查询适配移动端。
  • 优先 flex-basis 控制子项宽度：
    css .item { flex: 1 1 200px; }
  1. 性能优化：
  • 避免嵌套过多 Flex 容器，增加渲染开销。
  • 使用 gap 替代 margin，减少样式复杂性。
  1. 可访问性：
  • 确保 Flex 布局不破坏语义（如导航用 <nav>）。
  • 添加 ARIA 属性（如 role="navigation"）。
  1. 2025年趋势：
  • Tailwind CSS：用 flex、gap-4 等类快速布局。
  • KMP：Flex 布局在 WebView 中优化移动端 UI。
  • AI 辅助：VS Code 的 GitHub Copilot 可生成 Flex 样式。

五、学习建议

  • 练习：用 CodePen 实践 Flex 布局，创建导航栏或卡片列表。
  • 资源：
  • MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
  • W3Schools：https://www.w3schools.com/css/css3_flexbox.asp
  • CSDN：搜索“CSS Flex 布局”。
  • 时间：2-3 天掌握核心属性，1 周熟悉响应式设计。
  • 实践：开发 Web 页面（如导航、卡片）或 WebView 布局。

六、总结

Flex 布局必知容器属性（flex-direction、justify-content）、子项属性（flex、order），必会实现水平/垂直布局、响应式设计。2025年，Flex 仍是 Web 开发核心，结合 Tailwind 和 WebView 更高效，适合快速构建现代 UI。相比传统布局，Flex 简单且灵活。

如果需要具体场景代码（如 React Flex 组件或 KMP 示例）或有问题，告诉我，我可以提供更详细解答！

类似文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注