BootStrap布局结构 Flex各种布局_bootstrap 左右分栏-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41614928/article/details/105134218

本文深入探讨了不同布局结构的设计理念，包括左右结构、上下结构、上中下结构、左中右结构以及组合嵌套结构。通过具体的代码示例，详细解析了每种布局的实现方式及其应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、左右结构
在这里插入图片描述

<div class="d-flex flex-row" style="width: 500px; height: 400px;border:2px solid #ae00e6">
    <div region="west" class="west" style="width: 140px;">
        西
    </div>
    <div region="center" class="center flex-fill">
        中
    </div>
</div>

在这里插入图片描述

<div class="d-flex flex-row" style="width: 500px; height: 400px;border:2px solid #ae00e6">
    <div region="center" class="center flex-fill">
        中
    </div>
    <div region="east" class="east" style="width: 140px;">
        东
    </div>
</div>

2、上下结构

在这里插入图片描述

<div class="d-flex flex-column" style="width: 500px; height: 400px;border:2px solid #ae00e6">
    <div region="north" class="north" style="height: 80px;">
        北
    </div>
    <div region="center" class="center flex-fill">
        中
    </div>
</div>

在这里插入图片描述

<div class="d-flex flex-column" style="width: 500px; height: 400px;border:2px solid #ae00e6">
    <div region="center" class="center flex-fill">
        中
    </div>
    <div region="south" class="south" style="height: 80px;">
        南
    </div>
</div>

3、上中下
在这里插入图片描述

<div class="d-flex flex-column" style=" height: 400px;border:2px solid #ae00e6">
    <div region="north" class="north" style="height: 80px;">
        北
    </div>
    <div region="center" class="center flex-fill">
        中
    </div>
    <div region="south" class="south" style="height: 80px;">
        南
    </div>
</div>

4、左中右
在这里插入图片描述

<div class="d-flex flex-row" style=" height: 400px;border:2px solid #ae00e6">
    <div region="west" class="west" style="width: 140px;">
        西
    </div>
    <div region="center" class="center flex-fill">
        中
    </div>
    <div region="east" class="east" style="width: 140px;">
        东
    </div>
</div>

5、组合嵌套

在这里插入图片描述

<div class="d-flex flex-row" style="width: 500px; height: 400px;border:2px solid #ae00e6">
    <div region="west" class="west" style="width: 140px;">
        西
    </div>
    <div region="center" class="center flex-fill">
        <div class="d-flex flex-column flex-fill" style="border:1px solid blue;height: 100%;">
            <div region="north" class="north" style="height: 80px;">
                北
            </div>
            <div region="center" class="center flex-fill">
                中
            </div>
        </div>
    </div>
</div>

在这里插入图片描述

<div class="d-flex flex-row" style="width: 500px; height: 400px;border:2px solid #ae00e6">
    <div region="center" class="center flex-fill">
        <div class="d-flex flex-column flex-fill" style="border:1px solid blue;height: 100%;">
            <div region="center" class="center flex-fill">
                中
            </div>
            <div region="south" class="south" style="height: 80px;">
                南
            </div>
        </div>
    </div>
    <div region="east" class="east" style="width: 140px;">
        东
    </div>
</div>

在这里插入图片描述

<div class="d-flex flex-row" style="width: 500px; height: 400px;border:2px solid #ae00e6">
    <div region="center" class="center flex-fill">
        <div class="d-flex flex-column flex-fill" style="border:1px solid blue;height: 100%;">
            <div region="north" class="north" style="height: 80px;">
                北
            </div>
            <div region="center" class="center flex-fill">
                中
            </div>
            <div region="south" class="south" style="height: 80px;">
                南
            </div>
        </div>
    </div>
    <div region="east" class="east" style="width: 140px;">
        东
    </div>
</div>

在这里插入图片描述

<div class="d-flex flex-row" style="width: 500px; height: 400px;border:2px solid #ae00e6">
    <div region="west" class="west" style="width: 140px;">
        西
    </div>
    <div region="center" class="center flex-fill">
        <div class="d-flex flex-column flex-fill" style="border:1px solid blue;height: 100%;">
            <div region="north" class="north" style="height: 80px;">
                北
            </div>
            <div region="center" class="center flex-fill">
                中
            </div>
            <div region="south" class="south" style="height: 80px;">
                南
            </div>
        </div>
    </div>
</div>

在这里插入图片描述

<div class="d-flex flex-column" style=" height: 400px;border:2px solid #ae00e6">
    <div region="north" class="north" style="height: 80px;">
        北
    </div>
    <div region="center" class="center flex-fill d-flex flex-column">
        <div class="d-flex flex-row flex-fill" style=" height: 100%;border:1px solid blue">
            <div region="west" class="west" style="width: 140px;">
                西
            </div>
            <div region="center" class="center flex-fill">
                中
            </div>
            <div region="east" class="east" style="width: 140px;">
                东
            </div>
        </div>
    </div>
    <div region="south" class="south" style="height: 80px;">
        南
    </div>
</div>

在这里插入图片描述

<div class="d-flex flex-column" style=" height: 400px;border:2px solid #ae00e6">
    <div region="center" class="center flex-fill d-flex flex-column">
        <div class="d-flex flex-row flex-fill" style=" height: 100%;border:1px solid blue">
            <div region="west" class="west" style="width: 140px;">
                西
            </div>
            <div region="center" class="center flex-fill">
                中
            </div>
            <div region="east" class="east" style="width: 140px;">
                东
            </div>
        </div>
    </div>
    <div region="south" class="south" style="height: 80px;">
        南
    </div>
</div>

在这里插入图片描述

<div class="d-flex flex-column" style=" height: 400px;border:2px solid #ae00e6">
    <div region="north" class="north" style="height: 80px;">
        北
    </div>
    <div region="center" class="center flex-fill d-flex flex-column">
        <div class="d-flex flex-row flex-fill" style=" height: 100%;border:1px solid blue">
            <div region="west" class="west" style="width: 140px;">
                西
            </div>
            <div region="center" class="center flex-fill">
                中
            </div>
            <div region="east" class="east" style="width: 140px;">
                东
            </div>
        </div>
    </div>
</div>

在这里插入图片描述

<div class="d-flex flex-column" style=" height: 400px;border:2px solid #ae00e6">
    <div region="north" class="north" style="height: 80px;">
        北
    </div>
    <div region="center" class="center flex-fill d-flex flex-column">
        <div class="d-flex flex-row flex-fill" style=" height: 100%;border:1px solid blue">
            <div region="center" class="center flex-fill">
                中
            </div>
            <div region="east" class="east" style="width: 140px;">
                东
            </div>
        </div>
    </div>
    <div region="south" class="south" style="height: 80px;">
        南
    </div>
</div>