CSS——弹性 flex 布局

LaoKonB

已于 2025-06-02 18:27:24 修改

阅读量550

点赞数 14

分类专栏： wed前端开发文章标签： css 前端 html css3

于 2025-06-02 18:23:19 首次发布

本文链接：https://blog.csdn.net/2401_89085837/article/details/148383892

版权

wed前端开发专栏收录该内容

12 篇文章

订阅专栏

一、Flex 布局核心概念与机制

Flexbox 是 CSS3 引入的一种一维布局模型，旨在提供更高效的方式来布局、对齐和分配容器内项目的空间。

其核心概念包括：

容器与项目：采用 Flex 布局的元素称为 Flex 容器，其内部的子元素称为 Flex 项目。

主轴与交叉轴：Flex 容器有两根轴，主轴由flex-direction定义，交叉轴垂直于主轴。

空间分配：通过 flex-basis、flex-grow 和 flex-shrink 控制项目在主轴上的初始大小、放大和缩小比例。

对齐方式：justify-content 控制主轴对齐，align-items 和 align-content 控制交叉轴对齐。

二、示例

（一）基础布局示例1

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Flex布局示例1 - 基本容器</title>
    <style>
        .container {

            display: flex;

            border: 2px solid #ccc;
            padding: 10px;
        }

        .item {
            background-color: #4CAF50;
            color: white;
            margin: 5px;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>

<body>
    <h3>Flex容器示例</h3>
    <div class="container">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>

        <div class="item">项目4</div>
        <div class="item">项目5</div>
        <div class="item">项目6</div>
    </div>
</body>

</html>

通过 display: flex 将此元素转换为 Flex 容器，其内部项目会自动水平排列。
当一个父盒子被设置flex弹性盒时，该弹性盒的默认规则为：进入该弹性盒的项目，会按照主轴方向排列，排到位置不够时，换行继续排

（二）布局示例2

默认盒子格式：

.container {
    display: flex;
    border: 2px solid #ccc;
    padding: 10px;
    margin-bottom: 20px;
}
.item {
    background-color: #2196F3;
    color: white;
    margin: 5px;
    padding: 20px;
    text-align: center;
}

1、将从左到右的箭头，设置为主轴（默认值）

.row {
    flex-direction: row; /* 默认值，水平排列（从左到右） */
}

<h3>flex-direction: row 实验1： 将从左到右的箭头，设置为主轴（默认值）</h3>
<div class="container row">
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>
</div>

2、将从右到左的箭头，设置为主轴

.row-reverse {
    flex-direction: row-reverse; /* 水平反向排列（从右到左） */
}

<h3>flex-direction: row-reverse 实验2： 将从右到左的箭头，设置为主轴</h3>
<div class="container row-reverse">
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>
</div>

3、将从上到下的箭头，设置为主轴

.column {
    flex-direction: column; /* 垂直排列（从上到下） */
}

<h3>flex-direction: column 实验3： 将从上到下的箭头，设置为主轴</h3>
<div class="container column">
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>
</div>

4、将从下到上的箭头，设置为主轴

.column-reverse {
    flex-direction: column-reverse; /* 垂直反向排列（从下到上） */
}

<h3>flex-direction: column-reverse 实验4： 将从下到上的箭头，设置为主轴</h3>
<div class="container column-reverse">
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>
</div>

（三）布局示例3

默认盒子格式：

.container {
    display: flex;
    border: 2px solid #ccc;
    padding: 10px;
    margin-bottom: 20px;
    height: 100px;
}

.item {
    background-color: #FF9800;
    color: white;
    margin: 5px;
    padding: 20px;
    text-align: center;
}

1、项目向主轴起点对齐（默认值）

.justify-start {
    justify-content: flex-start; /* 默认值，项目向主轴起点对齐 */
}

<h3>justify-content: flex-start 项目向主轴起点对齐（默认值）</h3>
<div class="container justify-start">
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>
</div>

2、项目向主轴终点对齐

.justify-end {
    justify-content: flex-end; /* 项目向主轴终点对齐 */
}

<h3>justify-content: flex-end 项目向主轴终点对齐</h3>
<div class="container justify-end">
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>
</div>

3、项目在主轴居中对齐

.justify-center {
    justify-content: center; /* 项目在主轴居中对齐 */
}

<h3>justify-content: center 项目在主轴居中对齐</h3>
<div class="container justify-center">
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>
</div>

4、项目均匀分布，首尾项目紧贴容器边缘

.justify-between {
    justify-content: space-between; /* 项目均匀分布，首尾项目紧贴容器边缘 */
}

<h3>justify-content: space-between 项目均匀分布，首尾项目紧贴容器边缘</h3>
<div class="container justify-between">
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>
</div>

5、项目均匀分布，每个项目两侧间距相等

.justify-around {
    justify-content: space-around; /* 项目均匀分布，每个项目两侧间距相等 */
}

<h3>justify-content: space-around   项目均匀分布，每个项目两侧间距相等</h3>
<div class="container justify-around">
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>
</div>

6、项目均匀分布，所有间距相等

.justify-evenly {
    justify-content: space-evenly; /* 项目均匀分布，所有间距相等 */
}

<h3>justify-content: space-evenly   项目均匀分布，所有间距相等</h3>
<div class="container justify-evenly">
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>
</div>

（四）布局示例4

默认盒子格式：

.container {
    display: flex;
    border: 2px solid #ccc;
    padding: 10px;
    margin-bottom: 20px;
    height: 200px;  /* 设置高度以便观察垂直对齐效果 */
}

.item {
    background-color: #9C27B0;
    color: white;
    margin: 5px;
    padding: 20px;
    text-align: center;
}

.tall {
    height: 120px;
}

.short {
    height: 60px;
}

添加了固定高度 height: 60px，这创建了一个显式的基线

这会影响基线计算。Flexbox 规范中有一个重要规则：

当项目有固定高度时，其内容会在该高度内对齐，而不是拉伸以适应容器。

————

在基线对齐模式下，这意味着：

固定高度的项目会保持其高度，文本内容会在该高度内垂直对齐，

所有项目的文本基线会对齐在同一条线上。

————

解决方案：

如果你希望项目拉伸，应该移除固定高度

1、项目向交叉轴起点对齐

.align-start {
    align-items: flex-start; /* 项目向交叉轴起点对齐 */
}

<h3>align-items: flex-start 项目向交叉轴起点对齐</h3>
<div class="container align-start">
    <div class="item tall">高项目</div>
    <div class="item short">矮项目</div>
    <div class="item">标准项目</div>
</div>

2、项目向交叉轴终点对齐

.align-end {
    align-items: flex-end; /* 项目向交叉轴终点对齐 */
}

<h3>align-items: flex-end 项目向交叉轴终点对齐</h3>
<div class="container align-end">
    <div class="item tall">高项目</div>
    <div class="item short">矮项目</div>
    <div class="item">标准项目</div>
</div>

3、项目在交叉轴居中对齐

.align-center {
    align-items: center; /* 项目在交叉轴居中对齐 */
}

<h3>align-items: center 项目在交叉轴居中对齐</h3>
<div class="container align-center">
    <div class="item tall">高项目</div>
    <div class="item short">矮项目</div>
    <div class="item">标准项目</div>
</div>

4、项目拉伸以填满容器高度（默认值）

.align-stretch {
    align-items: stretch; /* 项目拉伸以填满容器高度（默认值） */
}

<h3>align-items: stretch 项目拉伸以填满容器高度（默认值）</h3>
<div class="container align-stretch">
    <div class="item" style="padding: 5px;">拉伸项目1</div>
    <div class="item" style="padding: 5px;">拉伸项目2</div>
    <div class="item" style="padding: 5px;">拉伸项目3</div>
</div>

5、项目根据基线对齐

.align-baseline {
    align-items: baseline; 
}
.baseline {
    padding-top: 80px;  
}

项目根据基线对齐
即使项目的高度不同，它们的文本底部也会对齐在同一条水平线上。
【基线对齐在以下场景特别有用】
导航菜单：当菜单项包含不同大小的文本或图标时，确保文本底部对齐
价格标签：当价格有不同的字体大小（如主价和小字体的原价）时，保持数字底部对齐
表单布局：确保标签和输入框的文本基线对齐

<h3>align-items: baseline 项目根据基线对齐</h3>
<div class="container align-baseline">
    <div class="item baseline">基线项目1</div>
    <div class="item">标准项目</div>
    <div class="item short">矮项目</div>
</div>

三、练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Flex布局-练习的答案</title>
    <style>
        /* 基础样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        
        /* 导航栏样式 */
        .navbar {


            display: flex;
            justify-content: space-between;
            align-items: center;



            background-color: #333;
            color: white;
            padding: 10px 20px;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        


        /* 中间的导航项目组 */
        .nav-links {
            display: flex;


            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .nav-links li {
            margin-left: 20px;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
        }
        




        /* 搜索框样式 */
        .search-box {
            display: flex;
            align-items: center;
        }
        
        .search-box input {
            padding: 5px;
            border: none;
            border-radius: 3px 0 0 3px;
        }
        
        .search-box button {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 0 3px 3px 0;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="logo">网站Logo</div>
        
        <ul class="nav-links">
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
        
        <div class="search-box">
            <input type="text" placeholder="搜索...">
            <button><i class="fa fa-search"></i></button>
        </div>
    </nav>
    <!-- 内容区域 -->
    <div class="container">
        <h1>欢迎来到我们的网站</h1>
        <p>这里是一些关于我们的内容。</p>
    </div>
</body>
</html>