垦荒学园

简体中文

English

简体中文

English

切换主题

Bootstrap Flex ​

🎯 概述 ​

Bootstrap Flex 提供了一套完整的弹性盒子布局工具类，用于快速创建灵活的响应式布局。

📦 基本用法 ​

html
<!-- 启用 Flex -->
<div class="d-flex">
    <div>项目 1</div>
    <div>项目 2</div>
    <div>项目 3</div>
</div>

<!-- 内联 Flex -->
<div class="d-inline-flex">
    <div>项目 1</div>
    <div>项目 2</div>
</div>

📍 方向 ​

html
<!-- 水平方向（默认） -->
<div class="d-flex flex-row">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

<!-- 水平反向 -->
<div class="d-flex flex-row-reverse">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

<!-- 垂直方向 -->
<div class="d-flex flex-column">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

<!-- 垂直反向 -->
<div class="d-flex flex-column-reverse">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

🎯 对齐 ​

html
<!-- 主轴对齐 -->
<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>

<!-- 交叉轴对齐 -->
<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>

🌟 实际示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Flex 示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .demo-box {
            padding: 1rem;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            margin-bottom: 1rem;
        }
        .demo-item {
            padding: 0.5rem 1rem;
            background-color: #0d6efd;
            color: white;
            margin: 0.25rem;
        }
    </style>
</head>
<body>
    <div class="container my-5">
        <h1>Bootstrap Flex 示例</h1>
        
        <h2>基本 Flex</h2>
        <div class="demo-box d-flex">
            <div class="demo-item">项目 1</div>
            <div class="demo-item">项目 2</div>
            <div class="demo-item">项目 3</div>
        </div>
        
        <h2>主轴对齐</h2>
        <div class="demo-box d-flex justify-content-center">
            <div class="demo-item">居中</div>
            <div class="demo-item">对齐</div>
        </div>
        
        <div class="demo-box d-flex justify-content-between">
            <div class="demo-item">两端</div>
            <div class="demo-item">对齐</div>
        </div>
        
        <h2>交叉轴对齐</h2>
        <div class="demo-box d-flex align-items-center" style="height: 150px;">
            <div class="demo-item">垂直</div>
            <div class="demo-item">居中</div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

下一步 ​

下一章：Bootstrap 复选框与单选框 →