Bootstrap 5学习教程，从入门到精通，Bootstrap 5 Flex 布局语法知识点及案例（27）
Bootstrap 5 Flex 布局语法知识点及案例
Bootstrap 5 提供了强大的 Flexbox 工具集，让布局变得更加简单灵活。以下是 Bootstrap 5 Flex 布局的完整知识点和详细案例代码。
一、Flex 布局基础语法
1. 启用 Flex 布局
<div class="d-flex">我是一个flex容器div>
<div class="d-inline-flex">我是一个行内flex容器div>
2. 方向控制 (flex-direction)
<div class="d-flex flex-row">水平排列（默认）div>
<div class="d-flex flex-row-reverse">水平反向排列div>
<div class="d-flex flex-column">垂直排列div>
<div class="d-flex flex-column-reverse">垂直反向排列div>
3. 主轴对齐 (justify-content)
<div class="d-flex justify-content-start">起始对齐（默认）div>
<div class="d-flex justify-content-end">末端对齐div>
<div class="d-flex justify-content-center">居中对齐div>
<div class="d-flex justify-content-between">两端对齐div>
<div class="d-flex justify-content-around">均匀分布div>
<div class="d-flex justify-content-evenly">完全均匀分布div>
4. 交叉轴对齐 (align-items)
<div class="d-flex align-items-start">顶部对齐div>
<div class="d-flex align-items-end">底部对齐div>
<div class="d-flex align-items-center">垂直居中div>
<div class="d-flex align-items-baseline">基线对齐div>
<div class="d-flex align-items-stretch">拉伸填充（默认）div>
5. 多行对齐 (align-content)
<div class="d-flex flex-wrap align-content-start">多行顶部对齐div>
<div class="d-flex flex-wrap align-content-end">多行底部对齐div>
<div class="d-flex flex-wrap align-content-center">多行居中div>
<div class="d-flex flex-wrap align-content-between">多行两端对齐div>
<div class="d-flex flex-wrap align-content-around">多行均匀分布div>
<div class="d-flex flex-wrap align-content-stretch">多行拉伸（默认）div>
6. 子项对齐 (align-self)
<div class="d-flex">
<div class="align-self-start">顶部对齐div>
<div class="align-self-end">底部对齐div>
<div class="align-self-center">垂直居中div>
<div class="align-self-baseline">基线对齐div>
<div class="align-self-stretch">拉伸填充div>
div>
7. 填充与间距 (flex-fill & gap)
<div class="d-flex">
<div class="flex-fill">填充剩余空间div>
<div class="flex-fill">填充剩余空间div>
div>
<div class="d-flex gap-1">小间距div>
<div class="d-flex gap-2">中等间距div>
<div class="d-flex gap-3">大间距div>
8. 换行控制 (flex-wrap)
<div class="d-flex flex-nowrap">不换行（默认）div>
<div class="d-flex flex-wrap">换行div>
<div class="d-flex flex-wrap-reverse">反向换行div>
9. 子项排序 (order)
<div class="d-flex">
<div class="order-3">第一项div>
<div class="order-1">第二项div>
<div class="order-2">第三项div>
div>
10. 子项扩展 (flex-grow/shrink)
<div class="d-flex">
<div class="flex-grow-1">扩展填充div>
<div>固定宽度div>
div>
<div class="d-flex">
<div class="flex-shrink-1">允许收缩div>
<div class="w-100">宽元素div>
div>
二、响应式 Flex 布局
所有 Flex 类都可以添加响应式前缀：
.d-sm-flex.flex-md-row.justify-content-lg-center.align-items-xl-start
断点：sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px)
三、完整案例代码
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5 Flex 布局案例title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.box {
height: 50px;
background-color: #0d6efd;
color: white;
border: 1px solid white;
display: flex;
align-items: center;
justify-content: center;
}
.box-alt {
background-color: #6c757d;
}
.container-example {
background-color: #f8f9fa;
padding: 15px;
margin-bottom: 20px;
border-radius: 5px;
}
h2 {
margin-top: 30px;
margin-bottom: 15px;
}
style>
head>
<body>
<div class="container py-4">
<h1 class="text-center mb-4">Bootstrap 5 Flex 布局案例h1>
<div class="container-example">
<h2>1. 基本 Flex 容器h2>
<div class="d-flex p-2 bg-light">
<div class="box">Flex 容器div>
<div class="box">子项 1div>
<div class="box">子项 2div>
div>
<div class="d-inline-flex p-2 bg-light mt-2">
<div class="box">行内 Flex 容器div>
div>
div>
<div class="container-example">
<h2>2. 方向控制h2>
<div class="d-flex flex-row mb-2">
<div class="box">flex-row (默认)div>
<div class="box">子项 1div>
<div class="box">子项 2div>
div>
<div class="d-flex flex-row-reverse mb-2">
<div class="box">flex-row-reversediv>
<div class="box">子项 1div>
<div class="box">子项 2div>
div>
<div class="d-flex flex-column mb-2" style="height: 150px;">
<div class="box">flex-columndiv>
<div class="box">子项 1div>
<div class="box">子项 2div>
div>
<div class="d-flex flex-column-reverse" style="height: 150px;">
<div class="box">flex-column-reversediv>
<div class="box">子项 1div>
<div class="box">子项 2div>
div>
div>
<div class="container-example">
<h2>3. 主轴对齐 (justify-content)h2>
<div class="d-flex justify-content-start mb-2">
<div class="box">start (默认)div>
<div class="box">子项div>
div>
<div class="d-flex justify-content-end mb-2">
<div class="box">enddiv>
<div class="box">子项div>
div>
<div class="d-flex justify-content-center mb-2">
<div class="box">centerdiv>
<div class="box">子项div>
div>
<div class="d-flex justify-content-between mb-2">
<div class="box">betweendiv>
<div class="box">子项div>
<div class="box">子项div>
div>
<div class="d-flex justify-content-around mb-2">
<div class="box">arounddiv>
<div class="box">子项div>
<div class="box">子项div>
div>
<div class="d-flex justify-content-evenly">
<div class="box">evenlydiv>
<div class="box">子项div>
<div class="box">子项div>
div>
div>
<div class="container-example">
<h2>4. 交叉轴对齐 (align-items)h2>
<div class="d-flex align-items-start mb-2 bg-light" style="height: 100px;">
<div class="box">align-items-startdiv>
<div class="box">子项div>
div>
<div class="d-flex align-items-end mb-2 bg-light" style="height: 100px;">
<div class="box">align-items-enddiv>
<div class="box">子项div>
div>
<div class="d-flex align-items-center mb-2 bg-light" style="height: 100px;">
<div class="box">align-items-centerdiv>
<div class="box">子项div>
div>
<div class="d-flex align-items-baseline mb-2 bg-light" style="height: 100px;">
<div class="box" style="height: 60px;">align-items-baselinediv>
<div class="box">子项div>
div>
<div class="d-flex align-items-stretch bg-light" style="height: 100px;">
<div class="box" style="height: auto;">align-items-stretch (默认)div>
<div class="box" style="height: auto;">子项div>
div>
div>
<div class="container-example">
<h2>5. 子项单独对齐 (align-self)h2>
<div class="d-flex bg-light" style="height: 150px;">
<div class="align-self-start box">align-self-startdiv>
<div class="align-self-end box">align-self-enddiv>
<div class="align-self-center box">align-self-centerdiv>
<div class="align-self-baseline box" style="height: 70px;">align-self-baselinediv>
<div class="align-self-stretch box" style="height: auto;">align-self-stretchdiv>
div>
div>
<div class="container-example">
<h2>6. 填充与间距h2>
<h5 class="mt-3">flex-fillh5>
<div class="d-flex mb-3">
<div class="flex-fill box">flex-filldiv>
<div class="flex-fill box">flex-filldiv>
<div class="flex-fill box">flex-filldiv>
div>
<h5>间距 (gap)h5>
<div class="d-flex gap-1 mb-2">
<div class="box">gap-1div>
<div class="box">子项div>
<div class="box">子项div>
div>
<div class="d-flex gap-2 mb-2">
<div class="box">gap-2div>
<div class="box">子项div>
<div class="box">子项div>
div>
<div class="d-flex gap-3">
<div class="box">gap-3div>
<div class="box">子项div>
<div class="box">子项div>
div>
div>
<div class="container-example">
<h2>7. 换行控制 (flex-wrap)h2>
<h5 class="mt-3">flex-nowrap (默认)h5>
<div class="d-flex flex-nowrap mb-3" style="width: 300px; overflow: auto;">
<div class="box" style="width: 150px;">flex-nowrapdiv>
<div class="box" style="width: 150px;">子项div>
<div class="box" style="width: 150px;">子项div>
div>
<h5>flex-wraph5>
<div class="d-flex flex-wrap mb-3" style="width: 300px;">
<div class="box" style="width: 150px;">flex-wrapdiv>
<div class="box" style="width: 150px;">子项div>
<div class="box" style="width: 150px;">子项div>
div>
<h5>flex-wrap-reverseh5>
<div class="d-flex flex-wrap-reverse" style="width: 300px;">
<div class="box" style="width: 150px;">flex-wrap-reversediv>
<div class="box" style="width: 150px;">子项div>
<div class="box" style="width: 150px;">子项div>
div>
div>
<div class="container-example">
<h2>8. 多行对齐 (align-content)h2>
<div class="d-flex flex-wrap align-content-start mb-2 bg-light" style="height: 200px;">
<div class="box" style="width: 100%; height: 40px;">align-content-startdiv>
<div class="box" style="width: 30%;">子项div>
<div class="box" style="width: 30%;">子项div>
<div class="box" style="width: 30%;">子项div>
div>
<div class="d-flex flex-wrap align-content-between bg-light" style="height: 200px;">
<div class="box" style="width: 100%; height: 40px;">align-content-betweendiv>
<div class="box" style="width: 30%;">子项div>
<div class="box" style="width: 30%;">子项div>
<div class="box" style="width: 30%;">子项div>
div>
div>
<div class="container-example">
<h2>9. 响应式 Flexh2>
<div class="d-flex flex-column flex-md-row">
<div class="box">小屏幕垂直div>
<div class="box">中等屏幕水平div>
div>
div>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>
body>
html>
四、Flex 布局案例代码
以下是一个综合性的示例，展示了如何使用 Bootstrap 5 的 Flex 工具类创建复杂的布局。每个部分都有详细注释，帮助理解每个类的用途。
示例：响应式导航栏与内容布局
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap 5 Flex 布局示例title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* 自定义样式，可根据需要调整 */
.header {
background-color: #0d6efd;
color: white;
padding: 1rem;
}
.sidebar {
background-color: #f8f9fa;
padding: 1rem;
}
.main-content {
padding: 1rem;
}
.footer {
background-color: #dee2e6;
padding: 1rem;
text-align: center;
}
style>
head>
<body>
<div class="header d-flex justify-content-between align-items-center">
<div>
<h1 class="mb-0">网站标题h1>
div>
<div>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航">
<span class="navbar-toggler-icon">span>
button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首页a>
li>
<li class="nav-item">
<a class="nav-link" href="#">关于a>
li>
<li class="nav-item">
<a class="nav-link" href="#">服务a>
li>
<li class="nav-item">
<a class="nav-link" href="#">联系a>
li>
ul>
div>
div>
nav>
div>
div>
<div class="container-fluid">
<div class="row">
<nav class="col-md-3 col-lg-2 d-none d-md-block sidebar">
<div class="position-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">侧边栏1a>
li>
<li class="nav-item">
<a class="nav-link" href="#">侧边栏2a>
li>
<li class="nav-item">
<a class="nav-link" href="#">侧边栏3a>
li>
<li class="nav-item">
<a class="nav-link" href="#">侧边栏4a>
li>
ul>
div>
nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex flex-column">
<h2>主要内容区域h2>
<p>这是一个使用 Bootstrap 5 Flex 布局的示例。p>
<div class="d-flex flex-wrap justify-content-between align-items-center">
<div class="p-2 border border-1 border-secondary m-2">项目1div>
<div class="p-2 border border-1 border-secondary m-2">项目2div>
<div class="p-2 border border-1 border-secondary m-2">项目3div>
<div class="p-2 border border-1 border-secondary m-2">项目4div>
<div class="p-2 border border-1 border-secondary m-2">项目5div>
div>
<p>上述项目使用了 Flex 换行和间距工具类，实现了响应式布局。p>
div>
main>
div>
div>
<div class="footer">
<p>© 2025 公司名称. 版权所有.p>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>
body>
html>
代码解析
-
引入 Bootstrap CSS 和 JS
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> ... <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>通过 CDN 引入 Bootstrap 5 的 CSS 和 JS 文件，确保可以使用 Bootstrap 的所有功能。
-
头部导航栏
<div class="header d-flex justify-content-between align-items-center"> ... div>.header：自定义类，用于设置头部背景色和文字颜色。.d-flex：将容器设置为 Flex 容器。.justify-content-between：在主轴（水平方向）上两端对齐。.align-items-center：在交叉轴（垂直方向）上居中对齐。
导航栏部分
<nav class="navbar navbar-expand-md"> ... nav>使用 Bootstrap 的导航栏组件，实现响应式导航。
-
主内容区域
<div class="container-fluid"> <div class="row"> ... div> div>.container-fluid：创建一个全宽的容器。.row：创建一个行，用于包含列。
侧边栏
<nav class="col-md-3 col-lg-2 d-none d-md-block sidebar"> ... nav>.col-md-3 col-lg-2：在不同屏幕尺寸下设置侧边栏的宽度。.d-none d-md-block：在中等及以上屏幕尺寸下显示侧边栏，其他情况下隐藏。.sidebar：自定义类，用于设置侧边栏的背景色和内边距。
主要内容
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4"> ... main>.col-md-9 ms-sm-auto col-lg-10：在不同屏幕尺寸下设置主内容区域的宽度。.px-md-4：在中等及以上屏幕尺寸下设置主内容区域的内边距。
Flex 布局示例
<div class="d-flex flex-wrap justify-content-between align-items-center"> ... div>.d-flex：将容器设置为 Flex 容器。.flex-wrap：允许子元素换行。.justify-content-between：在主轴（水平方向）上两端对齐。.align-items-center：在交叉轴（垂直方向）上居中对齐。
Flex 项目
<div class="p-2 border border-1 border-secondary m-2">项目1div>.p-2：设置内边距。.border border-1 border-secondary：添加边框。.m-2：设置外边距。
-
页脚
<div class="footer"> ... div>使用自定义类
.footer设置页脚的背景色和文字对齐。
五、Flex 布局的更多示例
示例 1：垂直居中内容
<div class="d-flex align-items-center justify-content-center" style="height: 200px; background-color: #e9ecef;">
<div>
<h3>垂直居中内容h3>
<p>使用 Flex 布局实现垂直和水平居中。p>
div>
div>
解析
.d-flex：设置为 Flex 容器。.align-items-center：在交叉轴（垂直方向）上居中对齐。.justify-content-center：在主轴（水平方向）上居中对齐。style="height: 200px; background-color: #e9ecef;"：设置容器高度和背景色。
示例 2：响应式 Flex 布局
<div class="d-flex flex-column flex-md-row justify-content-md-center align-items-md-center" style="height: 150px; background-color: #0dcaf0;">
<div class="p-2">项目1div>
<div class="p-2">项目2div>
<div class="p-2">项目3div>
div>
解析
.d-flex flex-column flex-md-row：在中等及以上屏幕尺寸下使用水平方向排列，其他情况下使用垂直方向排列。.justify-content-md-center：在中等及以上屏幕尺寸下在主轴（水平方向）上居中对齐。.align-items-md-center：在中等及以上屏幕尺寸下在交叉轴（垂直方向）上居中对齐。style="height: 150px; background-color: #0dcaf0;"：设置容器高度和背景色。
示例 3：Flex 项目对齐
<div class="d-flex align-items-start" style="height: 100px; background-color: #f0ad4e;">
<div class="p-2">顶部对齐div>
<div class="p-2 align-self-center">居中对齐div>
<div class="p-2 align-self-end">底部对齐div>
div>
解析
.d-flex align-items-start：设置为 Flex 容器，并在交叉轴（垂直方向）上顶部对齐。.align-self-center和.align-self-end：分别设置单个项目的交叉轴对齐方式。
六、总结
Bootstrap 5 提供了丰富的 Flexbox 工具类，使得布局设计更加简洁和高效。通过掌握这些工具类，可以轻松创建复杂且响应式的布局。以下是一些关键点：
- 容器设置：使用
.d-flex或.d-inline-flex来启用 Flex 布局。 - 方向与换行：控制 Flex 方向和是否换行。
- 对齐与分布：使用
justify-content-*和align-items-*类来控制对齐方式。 - Flex 属性：控制子元素的伸缩行为。
- 间距控制：使用 Bootstrap 的间距工具类来管理元素之间的间距。