跳到主要内容

Flexbox 容器属性详解

一、容器属性概览​

Flex 容器有六个主要属性：

  1. display
  2. flex-direction
  3. flex-wrap
  4. flex-flow
  5. justify-content
  6. align-items
  7. align-content

二、属性详解​

1. display​

.flex-container {
    display: flex;        /* 块级 flex 容器 */
    display: inline-flex; /* 行内 flex 容器 */
}
  • 块级 flex 容器 是一个块级元素，它将子元素排列成行，并允许子元素进行水平排列。
  • 行内 flex 容器 是一个行内元素，它将子元素排列成行，并允许子元素进行水平排列。

2. flex-direction（主轴方向）​

.flex-container {
    flex-direction: row;            /* 默认值：从左到右 */
    flex-direction: row-reverse;    /* 从右到左 */
    flex-direction: column;         /* 从上到下 */
    flex-direction: column-reverse; /* 从下到上 */
}

3. flex-wrap（换行方式）​

.flex-container {
    flex-wrap: nowrap;       /* 默认值：不换行 */
    flex-wrap: wrap;         /* 换行 */
    flex-wrap: wrap-reverse; /* 反向换行 */
}

4. flex-flow（方向和换行的简写）​

.flex-container {
    /* flex-direction 和 flex-wrap 的组合 */
    flex-flow: row nowrap;     /* 默认值 */
    flex-flow: column wrap;
    flex-flow: row-reverse wrap-reverse;
}

5. justify-content（主轴对齐）​

.flex-container {
    justify-content: flex-start;    /* 默认值：起点对齐 */
    justify-content: flex-end;      /* 终点对齐 */
    justify-content: center;        /* 居中对齐 */
    justify-content: space-between; /* 两端对齐 */
    justify-content: space-around;  /* 均匀分布（两端有间隔） */
    justify-content: space-evenly;  /* 均匀分布（间隔相等） */
}

6. align-items（交叉轴对齐）​

.flex-container {
    align-items: stretch;     /* 默认值：拉伸对齐 */
    align-items: flex-start;  /* 起点对齐 */
    align-items: flex-end;    /* 终点对齐 */
    align-items: center;      /* 居中对齐 */
    align-items: baseline;    /* 基线对齐 */
}

7. align-content（多行对齐）​

.flex-container {
    align-content: stretch;      /* 默认值：拉伸对齐 */
    align-content: flex-start;   /* 起点对齐 */
    align-content: flex-end;     /* 终点对齐 */
    align-content: center;       /* 居中对齐 */
    align-content: space-between;/* 两端对齐 */
    align-content: space-around; /* 均匀分布 */
}

示例代码​

<!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-container {
            display: flex;
            background-color: #f0f0f0;
            padding: 10px;
            margin-bottom: 20px;
            border: 2px solid #333;
            min-height: 150px;
        }

        .flex-item {
            background-color: #007BFF;
            color: white;
            padding: 20px;
            margin: 5px;
            text-align: center;
            min-width: 100px;
        }

        /* flex-direction 示例 */
        .direction-row { flex-direction: row; }
        .direction-row-reverse { flex-direction: row-reverse; }
        .direction-column { flex-direction: column; }
        .direction-column-reverse { flex-direction: column-reverse; }

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

        /* justify-content 示例 */
        .justify-start { justify-content: flex-start; }
        .justify-end { justify-content: flex-end; }
        .justify-center { justify-content: center; }
        .justify-between { justify-content: space-between; }
        .justify-around { justify-content: space-around; }
        .justify-evenly { justify-content: space-evenly; }

        /* align-items 示例 */
        .align-stretch { align-items: stretch; }
        .align-start { align-items: flex-start; }
        .align-end { align-items: flex-end; }
        .align-center { align-items: center; }
        .align-baseline { align-items: baseline; }

        /* align-content 示例 */
        .content-stretch { align-content: stretch; }
        .content-start { align-content: flex-start; }
        .content-end { align-content: flex-end; }
        .content-center { align-content: center; }
        .content-between { align-content: space-between; }
        .content-around { align-content: space-around; }

        .flex-item-varied {
            padding: 10px 20px;
        }

        .flex-item-varied:nth-child(2) {
            padding: 30px 20px;
        }

        .flex-item-varied:nth-child(3) {
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Flexbox 容器属性示例</h1>

        <h2>flex-direction</h2>
        <div class="flex-container direction-row">
            <div class="flex-item">1</div>
            <div class="flex-item">2</div>
            <div class="flex-item">3</div>
        </div>

        <div class="flex-container direction-row-reverse">
            <div class="flex-item">1</div>
            <div class="flex-item">2</div>
            <div class="flex-item">3</div>
        </div>

        <h2>flex-wrap</h2>
        <div class="flex-container 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>justify-content</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>

        <div class="flex-container justify-center">
            <div class="flex-item">1</div>
            <div class="flex-item">2</div>
            <div class="flex-item">3</div>
        </div>

        <h2>align-items</h2>
        <div class="flex-container align-center">
            <div class="flex-item flex-item-varied">1</div>
            <div class="flex-item flex-item-varied">2</div>
            <div class="flex-item flex-item-varied">3</div>
        </div>

        <h2>align-content</h2>
        <div class="flex-container wrap content-between" style="height: 300px;">
            <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>
    </div>
</body>
</html>

注意事项​

  1. flex-direction 会影响主轴方向，进而影响其他属性的行为
  2. align-content 只在多行 flex 容器中生效
  3. justify-content 和 align-items 是最常用的对齐方式
  4. 合理使用 flex-wrap 实现响应式布局

实践建议​

  1. 优先使用 justify-content 和 align-items 实现布局
  2. 使用 flex-wrap 处理容器空间不足的情况
  3. 注意主轴方向对布局的影响
  4. 灵活运用不同的对齐方式组合