基於BootStrap 4.x 中的Flex 實現各種布局

各種布局，總有一款適合你

基於bootstrap 4.x 中的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>

2、左右結構（左寬右窄）

<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>

3、上下結構（1）

<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>

4、上下結構（2）

<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>

5、上中下

<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>

6、左中右

<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>

7、組合嵌套（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 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>

8、組合嵌套（2）

<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>

9、組合嵌套（3）

<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>

10、組合嵌套（4）

<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>

11、組合嵌套（5）

<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>

12、組合嵌套（6）

<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>

13、組合嵌套（7）

<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>

14、組合嵌套（8）

<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>