Bootstrap中的弹性布局（flex）

• 使用.d-flex和.d-inline-flex实现开启flex布局样式;
• .flex-row可以呈现子元素水平方向的位置，默认居左并从左到右显示(1,2,3)；
• .flex-row-reverse子元素水平方向居右从左到右显示(3，2，1);
• .flex-column 实现子元素垂直效果，并从上往下显示(1，2,3)；
• .flex-column-reverse实现子元素垂直效果，并从上往下显示(3，2，1)；
• .justify-content-start(end、center、between、around)实现内容对齐；
• .align-items-start(end、center、baseline、stretch)实现项目对齐;
• .align-self-start(end、center、baseline、stretch)实现单项目对齐;
  例如：

        <div class="d-flex flex-row-reverse border border-dark mt-5 justify-content-center">
            <div class="p-2 border border-success">
                1
            </div>
            <div class="p-2 border border-success">
                2
            </div>
            <div class="p-2 border border-success">
                3
            </div>
        </div>
        <div class="d-flex flex-column-reverse border border-dark mt-5 justify-content-between" style="height: 200px;">
            <div class="p-2 border border-success">
                1
            </div>
            <div class="p-2 border border-success">
                2
            </div>
            <div class="p-2 border border-success">
                3
            </div>
        </div>
        <div class="d-flex  border border-dark mt-5 align-items-baseline" style="height: 200px;">
            <div class="p-2 border border-success align-self-center">
                1
            </div>
            <div class="p-2 border border-success">
                2
            </div>
            <div class="p-2 border border-success">
                3
            </div>
        </div>

• 使用.flex-fill强制让每个元素项目占据相等的水平宽度;
• 多个项目同时设置了.flex-fill,则它们等比例分割宽度，适合导航项目;
• 如果其中一个或两个没有设置.flex-fill，则没有设置的会被设置的填充宽度;
• 使用.flex-grow-*，*表示0或1，也能实现.flex-fill的功能，设置1即可;
• 通过元素生成的css可以看出，其实.flex-fill就是flex族的简写形式;
• 使用.flex-shrink-*，*表示0或1，表示是否强制更换到新行中;
• 使用.mr-auto和.ml-auto等对齐方式，对flex元素进行浮动对齐;
• 对于垂直方向，也可以使用.mb-auto和.mt-auto来设置对象方向;
• 使用.flex-wrap(包裹)和.flex-nowrap(不包裹，默认)来设置子元素项目;
• 使用.flex-wrap-reverse进行项目排序的倒序;
• 使用.order-*，来设置子元素项目的排序顺序，支持.order-*-*;
• .align-content-start(end、center、between、around、stretch)垂直对齐;
  例如：

        <div class="d-flex flex-row-reverse border border-dark mt-5 justify-content-center">
            <div class="p-2 border border-success">
                1
            </div>
            <div class="p-2 border border-success flex-fill">
                2
            </div>
            <div class="p-2 border border-success">
                3
            </div>
        </div>
        <div class="d-flex flex-row-reverse border border-dark mt-5 justify-content-center">
            <div class="p-2 border border-success">
                1
            </div>
            <div class="p-2 border border-success flex-grow-1">
                2
            </div>
            <div class="p-2 border border-success">
                3
            </div>
        </div>
        <div class="d-flex border border-dark mt-5 justify-content-center">
            <div class="p-2 border border-success w-100">
                1
            </div>
            <div class="p-2 border border-success flex-shrink-1">
                1hello world
            </div>
            <div class="p-2 border border-success">
                2hello world
            </div>
        </div>
        <div class="d-flex border border-dark mt-5 justify-content-center">
            <div class="p-2 border border-success mr-auto">
                1
            </div>
            <div class="p-2 border border-success">
                2
            </div>
            <div class="p-2 border border-success">
                3
            </div>
        </div>
        <div class="d-flex border border-dark mt-5 justify-content-center flex-wrap" style="width: 50px;">
            <div class="p-2 border border-success order-4">
                1
            </div>
            <div class="p-2 border border-success order-3">
                2
            </div>
            <div class="p-2 border border-success order-2">
                3
            </div>
            <div class="p-2 border border-success order-1">
                4
            </div>
        </div>
                <div class="d-flex border border-dark mt-5 flex-wrap align-content-center" style="height: 300px;">
            <div class="p-2 border border-success order-4">
                1
            </div>
            <div class="p-2 border border-success order-3">
                2
            </div>
            <div class="p-2 border border-success order-2">
                3
            </div>
            <div class="p-2 border border-success order-1">
                4
            </div>
        </div>