跳到主要内容

Flexbox概述

一、Flexbox 简介​

1. 什么是 Flexbox？​

  • Flexbox 是 CSS3 引入的一种新的布局方式
  • 全称为 Flexible Box Layout Module
  • 专门用于创建更加灵活和响应式的页面布局

2. 为什么使用 Flexbox？​

  • 简化复杂布局的实现
  • 轻松实现垂直居中
  • 自适应容器大小
  • 改变元素显示顺序
  • 空间自动分配和对齐

二、Flexbox 基本概念​

1. 容器和项目​

  • Flex 容器：设置 display: flex 的元素
  • Flex 项目：Flex 容器的直接子元素

2. 主轴和交叉轴​

  • 主轴：由 flex-direction 属性确定的方向
  • 交叉轴：垂直于主轴的方向

3. 基本属性d​

容器属性：​

.flex-container {
    display: flex;              /* 或 inline-flex */
    flex-direction: row;        /* 主轴方向 */
    flex-wrap: nowrap;         /* 是否换行 */
    justify-content: center;    /* 主轴对齐方式 */
    align-items: center;       /* 交叉轴对齐方式 */
    align-content: stretch;    /* 多行对齐方式 */
}
  • align-items 的设置对象是行内成员;
  • align-content 的设置对象是所有行，且只有在多行弹性盒子容器中才生效。

项目属性：​

.flex-item {
    order: 0;                  /* 排序 */
    flex-grow: 0;             /* 放大比例 */
    flex-shrink: 1;           /* 缩小比例 */
    flex-basis: auto;         /* 初始大小 */
    align-self: auto;         /* 单个项目对齐方式 */
}

示例代码​

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox 概述示例</title>
    <style>
        .container {
            max-width: 800px;
            margin: 20px auto;
            font-family: Arial, sans-serif;
        }

        /* 基础 Flex 容器 */
        .flex-container {
            display: flex;
            background-color: #f0f0f0;
            padding: 10px;
            margin-bottom: 20px;
            border: 2px solid #333;
        }

        /* Flex 项目 */
        .flex-item {
            background-color: #007BFF;
            color: white;
            padding: 20px;
            margin: 5px;
            text-align: center;
        }

        /* 不同主轴方向 */
        .flex-row { flex-direction: row; }
        .flex-column { flex-direction: column; }
        .flex-row-reverse { flex-direction: row-reverse; }

        /* 不同对齐方式 */
        .justify-center { justify-content: center; }
        .justify-between { justify-content: space-between; }
        .align-center { align-items: center; }

        /* 换行示例 */
        .flex-wrap {
            flex-wrap: wrap;
        }

        /* 不同尺寸的项目 */
        .flex-item-large {
            flex-grow: 2;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Flexbox 布局示例</h1>

        <h2>基础 Flex 容器</h2>
        <div class="flex-container">
            <div class="flex-item">项目 1</div>
            <div class="flex-item">项目 2</div>
            <div class="flex-item">项目 3</div>
        </div>

        <h2>列方向排列</h2>
        <div class="flex-container flex-column">
            <div class="flex-item">项目 1</div>
            <div class="flex-item">项目 2</div>
            <div class="flex-item">项目 3</div>
        </div>

        <h2>居中对齐</h2>
        <div class="flex-container justify-center align-center" style="height: 200px;">
            <div class="flex-item">居中项目</div>
        </div>

        <h2>空间分布</h2>
        <div class="flex-container justify-between">
            <div class="flex-item">项目 1</div>
            <div class="flex-item">项目 2</div>
            <div class="flex-item">项目 3</div>
        </div>

        <h2>自动换行</h2>
        <div class="flex-container flex-wrap">
            <div class="flex-item">项目 1</div>
            <div class="flex-item">项目 2</div>
            <div class="flex-item">项目 3</div>
            <div class="flex-item">项目 4</div>
            <div class="flex-item">项目 5</div>
            <div class="flex-item">项目 6</div>
        </div>

        <h2>不同大小的项目</h2>
        <div class="flex-container">
            <div class="flex-item">普通项目</div>
            <div class="flex-item flex-item-large">放大的项目</div>
            <div class="flex-item">普通项目</div>
        </div>
    </div>
</body>
</html>

注意事项​

  1. Flexbox 主要用于一维布局（行或列）
  2. 注意浏览器兼容性
  3. 合理使用主轴和交叉轴的对齐方式
  4. 理解 flex-grow 和 flex-shrink 的作用

实践建议​

  1. 从简单的布局开始练习
  2. 使用浏览器开发者工具观察 Flex 布局
  3. 尝试不同的属性组合
  4. 注意响应式设计的实现