BootStrap佈局結構 Flex各種佈局

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>

原文鏈接：