1. <style>
    2.         body{
    3.             padding-bottom: 1000px;
    4.         }
    5.     </style>
    6. </head>
    8. <body>
    9.     <div class="container">
    10.         <!-- 变成弹性盒模型 -->
    11.         <div class="row">
    12.             <div class="col bg-primary text-white py-2 d-flex">这是一个弹性盒子</div>
    13.             <div class="col bg-info text-white py-2 d-inline-flex">这是一个弹性盒子</div>
    14.         </div>
    15.         <!-- 变成响应式的弹性盒模型 d-{breakpoint}-flex/inline-flex -->
    16.         <div class="row mt-1">
    17.             <div class="col bg-primary text-white py-2 d-lg-flex">这是一个弹性盒子</div>
    18.             <div class="col bg-info text-white py-2 d-lg-inline-flex">这是一个弹性盒子</div>
    19.         </div>
    21.         <!-- 
    22.             子元素的排列方向
    23.                 1、flex-row                正序水平排列
    24.                 2、flex-row-reverse        倒序水平排列
    25.                 3、flex-column            正序垂直排列
    26.                 3、flex-column-reverse    倒序垂直排列
    27.          -->
    28.         <div class="row bg-dark mt-5 flex-row">    <!-- 正序水平排列 -->
    29.             <div class="bg-success text-white">第1列</div>
    30.             <div class="bg-success text-white">第2列</div>
    31.             <div class="bg-success text-white">第3列</div>
    32.         </div>
    33.         <div class="row bg-dark mt-1 flex-row-reverse">    <!-- 倒序水平排列 -->
    34.             <div class="bg-success text-white">第1列</div>
    35.             <div class="bg-success text-white">第2列</div>
    36.             <div class="bg-success text-white">第3列</div>
    37.         </div>
    38.         <div class="row bg-dark mt-1 flex-column">    <!-- 正序垂直排列 -->
    39.             <div class="bg-success text-white">第1列</div>
    40.             <div class="bg-success text-white">第2列</div>
    41.             <div class="bg-success text-white">第3列</div>
    42.         </div>
    43.         <div class="row bg-dark mt-1 flex-column-reverse">    <!-- 倒序垂直排列 -->
    44.             <div class="bg-success text-white">第1列</div>
    45.             <div class="bg-success text-white">第2列</div>
    46.             <div class="bg-success text-white">第3列</div>
    47.         </div>
    49.         <!-- 响应式的排列方式，flex-{breakpoint}-row/column/row-reverse/column-reverse -->
    50.         <div class="row bg-dark mt-1 flex-sm-column-reverse">    <!-- 倒序垂直排列 -->
    51.             <div class="bg-success text-white">第1列</div>
    52.             <div class="bg-success text-white">第2列</div>
    53.             <div class="bg-success text-white">第3列</div>
    54.         </div>
    56.         <!-- 
    57.             子元素的对齐方式
    58.                 1、主轴上的对齐 - 水平对齐
    59.                 2、交叉轴（纵轴）上的对齐 - 垂直对齐
    60.          -->
    61.         <div class="row bg-dark mt-5 justify-content-start"><!-- 主轴上的对齐-左对齐 -->
    62.             <div class="bg-danger text-white">第1列</div>
    63.             <div class="bg-danger text-white">第2列</div>
    64.             <div class="bg-danger text-white">第3列</div>
    65.         </div>
    66.         <div class="row bg-dark mt-1 justify-content-end"><!-- 主轴上的对齐-右对齐 -->
    67.             <div class="bg-danger text-white">第1列</div>
    68.             <div class="bg-danger text-white">第2列</div>
    69.             <div class="bg-danger text-white">第3列</div>
    70.         </div>
    71.         <div class="row bg-dark mt-1 justify-content-center"><!-- 主轴上的对齐-居中对齐 -->
    72.             <div class="bg-danger text-white">第1列</div>
    73.             <div class="bg-danger text-white">第2列</div>
    74.             <div class="bg-danger text-white">第3列</div>
    75.         </div>
    76.         <div class="row bg-dark mt-1 justify-content-between"><!-- 主轴上的对齐-两端对齐 -->
    77.             <div class="bg-danger text-white">第1列</div>
    78.             <div class="bg-danger text-white">第2列</div>
    79.             <div class="bg-danger text-white">第3列</div>
    80.         </div>
    81.         <div class="row bg-dark mt-1 justify-content-around"><!-- 主轴上的对齐-分散居中对齐 -->
    82.             <div class="bg-danger text-white">第1列</div>
    83.             <div class="bg-danger text-white">第2列</div>
    84.             <div class="bg-danger text-white">第3列</div>
    85.         </div>
    86.         <div class="row bg-dark mt-1 justify-content-lg-around"><!-- 主轴上的对齐-分散居中对齐-响应式，justify-content-{breakpoint}-between/... -->
    87.             <div class="bg-danger text-white">第1列</div>
    88.             <div class="bg-danger text-white">第2列</div>
    89.             <div class="bg-danger text-white">第3列</div>
    90.         </div>
    92.         <div class="row bg-dark mt-1 align-items-start" style="height: 100px;"><!-- 交叉轴上的对齐-顶对齐 -->
    93.             <div class="bg-danger text-white">第1列</div>
    94.             <div class="bg-danger text-white">第2列</div>
    95.             <div class="bg-danger text-white">第3列</div>
    96.         </div>
    97.         <div class="row bg-dark mt-1 align-items-end" style="height: 100px;"><!-- 交叉轴上的对齐-底对齐 -->
    98.             <div class="bg-danger text-white">第1列</div>
    99.             <div class="bg-danger text-white">第2列</div>
    100.             <div class="bg-danger text-white">第3列</div>
    101.         </div>
    102.         <div class="row bg-dark mt-1 align-items-center" style="height: 100px;"><!-- 交叉轴上的对齐-中间对齐 -->
    103.             <div class="bg-danger text-white">第1列</div>
    104.             <div class="bg-danger text-white">第2列</div>
    105.             <div class="bg-danger text-white">第3列</div>
    106.         </div>
    107.         <div class="row bg-dark mt-1 align-items-baseline" style="height: 100px;"><!-- 交叉轴上的对齐-基线对齐 -->
    108.             <div class="bg-danger text-white">第1列</div>
    109.             <div class="bg-danger text-white">第2列</div>
    110.             <div class="bg-danger text-white">第3列</div>
    111.         </div>
    112.         <div class="row bg-dark mt-1 align-items-stretch" style="height: 100px;"><!-- 交叉轴上的对齐-
    113.                                                     如果子元素没有设置高或者设置成了auto，子元素将占满整个容器的高度 -->
    114.             <div class="bg-danger text-white">第1列</div>
    115.             <div class="bg-danger text-white" style="height: 50px;">第2列</div>
    116.             <div class="bg-danger text-white">第3列</div>
    117.         </div>
    118.         <div class="row bg-dark mt-1 align-items-md-start" style="height: 100px;"><!-- 交叉轴上的对齐-响应式 align-items-{breakpoint}-start/... -->
    119.             <div class="bg-danger text-white">第1列</div>
    120.             <div class="bg-danger text-white" style="height: 50px;">第2列</div>
    121.             <div class="bg-danger text-white">第3列</div>
    122.         </div>
    125.         <!-- 
    126.             元素的自身的对齐方式
    127.          -->
    128.         <div class="row bg-secondary mt-5" style="height: 100px;">
    129.             <div class="bg-warning text-white align-self-start">第1列</div>
    130.             <div class="bg-warning text-white align-self-end">第2列</div>
    131.             <div class="bg-warning text-white align-self-center">第3列</div>
    132.             <div class="bg-warning text-white align-self-baseline">第4列</div>
    133.             <div class="bg-warning text-white align-self-stretch">第5列</div>
    134.         </div>
    135.         <!-- 元素的自身的对齐方式-响应式，align-self-{breakpoint}-start -->
    136.         <div class="row bg-secondary mt-1" style="height: 100px;">
    137.             <div class="bg-warning text-white align-self-xl-start">第1列</div>
    138.             <div class="bg-warning text-white align-self-xl-end">第2列</div>
    139.             <div class="bg-warning text-white align-self-xl-center">第3列</div>
    140.             <div class="bg-warning text-white align-self-xl-baseline">第4列</div>
    141.             <div class="bg-warning text-white align-self-xl-stretch">第5列</div>
    142.         </div>
    145.         <!-- 填满 -->剩余的空间的瓜分
    146.         <div class="row mt-5 bg-primary">
    147.             <div class="bg-info text-white border-right flex-fill">第1列</div>
    148.             <div class="bg-info text-white border-right flex-fill">第2列</div>
    149.             <div class="bg-info text-white border-right flex-fill">第3列</div>
    150.         </div>
    151.         <!-- 填满，响应式，flex-{breakpoint}-fill -->
    152.         <div class="row mt-1 bg-primary">
    153.             <div class="bg-info text-white border-right flex-md-fill">第1列</div>
    154.             <div class="bg-info text-white border-right flex-md-fill">第2列</div>
    155.             <div class="bg-info text-white border-right flex-md-fill">第3列</div>
    156.         </div>
    159.         <!-- 
    160.             伸缩值：也就算是瓜分空间
    161.                 1、.flex-grow-*        扩展比例，数字为0表示不扩展，数字为1表示扩展。只有这两个数字
    162.                 2、.flex-shrink-*    收缩比例，数字为0表示不收缩，数字为1表示收缩。只有这两个数字
    163.          -->
    164.         <div class="row mt-5 bg-primary">
    165.             <div class="bg-danger border-right text-white flex-grow-1">第1列</div>
    166.             <div class="bg-danger border-right text-white">第2列</div>
    167.             <div class="bg-danger border-right text-white">第3列</div>
    168.         </div>
    169.         <div class="mt-1 bg-primary d-flex">
    170.             <div class="bg-danger border-right text-white w-100">第1列</div>
    171.             <div class="bg-danger border-right text-white flex-shrink-1">第2列</div>牺牲自己的空间来填充你的空间
    172.         </div>
    173.         <!-- 伸缩响应式，flex-{breakpoint}-{grow|shrink}-0/1 -->
    174.         <div class="row bg-primary">
    175.             <div class="bg-danger border-right text-white flex-lg-grow-1">第1列</div>
    176.             <div class="bg-danger border-right text-white">第2列</div>
    177.             <div class="bg-danger border-right text-white">第3列</div>
    178.         </div>
    181.         <!-- 自动的间距 -->
    182.         <div class="row mt-5 bg-secondary">
    183.             <div class="bg-success text-white py-2 mr-auto">第1列</div>
    184.             <div class="bg-success text-white py-2">第2列</div>
    185.             <div class="bg-success text-white py-2">第3列</div>
    186.         </div>
    187.         <div class="row mt-1 bg-secondary">
    188.             <div class="bg-success text-white py-2">第1列</div>
    189.             <div class="bg-success text-white py-2">第2列</div>
    190.             <div class="bg-success text-white py-2 ml-auto">第3列</div>
    191.         </div>
    192.         flex-column变成竖着排列的  
    193.         <div class="row mt-1 bg-secondary flex-column" style="height: 220px;">
    194.             <div class="bg-success text-white py-2 col-2 mb-auto">第1列</div>
    195.             <div class="bg-success text-white py-2 col-2">第2列</div>
    196.             <div class="bg-success text-white py-2 col-2">第3列</div>
    197.         </div>
    198.         <div class="row mt-1 bg-secondary flex-column align-items-end" style="height: 220px;">
    199.             <div class="bg-success text-white py-2 col-2">第1列</div>
    200.             <div class="bg-success text-white py-2 col-2">第2列</div>
    201.             <div class="bg-success text-white py-2 col-2 mt-auto">第3列</div>
    202.         </div>
    205.         <!-- Wrap --> flex-nowrap 不换行
    206.         <div class="row mt-5 bg-secondary flex-wrap-reverse">颠倒的顺序是行 行和行进行颠倒循序
    207.             <div class="col-1 bg-primary text-white">第1列</div>
    208.             <div class="col-1 bg-primary text-white">第2列</div>
    209.             <div class="col-1 bg-primary text-white">第3列</div>
    210.             <div class="col-1 bg-primary text-white">第4列</div>
    211.             <div class="col-1 bg-primary text-white">第5列</div>
    212.             <div class="col-1 bg-primary text-white">第6列</div>
    213.             <div class="col-1 bg-primary text-white">第7列</div>
    214.             <div class="col-1 bg-primary text-white">第8列</div>
    215.             <div class="col-1 bg-primary text-white">第9列</div>
    216.             <div class="col-1 bg-primary text-white">第10列</div>
    217.             <div class="col-1 bg-primary text-white">第11列</div>
    218.             <div class="col-1 bg-primary text-white">第12列</div>
    219.             <div class="col-1 bg-primary text-white">第13列</div>
    220.             <div class="col-1 bg-primary text-white">第14列</div>
    221.             <div class="col-1 bg-primary text-white">第15列</div>
    222.             <div class="col-1 bg-primary text-white">第16列</div>
    223.             <div class="col-1 bg-primary text-white">第17列</div>
    224.             <div class="col-1 bg-primary text-white">第18列</div>
    225.         </div>
    226.         <!-- Wrap,响应式，flex-{breakpoint}-wrap -->
    227.         <div class="row mt-1 bg-secondary flex-xl-wrap-reverse">
    228.             <div class="col-1 bg-primary text-white">第1列</div>
    229.             <div class="col-1 bg-primary text-white">第2列</div>
    230.             <div class="col-1 bg-primary text-white">第3列</div>
    231.             <div class="col-1 bg-primary text-white">第4列</div>
    232.             <div class="col-1 bg-primary text-white">第5列</div>
    233.             <div class="col-1 bg-primary text-white">第6列</div>
    234.             <div class="col-1 bg-primary text-white">第7列</div>
    235.             <div class="col-1 bg-primary text-white">第8列</div>
    236.             <div class="col-1 bg-primary text-white">第9列</div>
    237.             <div class="col-1 bg-primary text-white">第10列</div>
    238.             <div class="col-1 bg-primary text-white">第11列</div>
    239.             <div class="col-1 bg-primary text-white">第12列</div>
    240.             <div class="col-1 bg-primary text-white">第13列</div>
    241.             <div class="col-1 bg-primary text-white">第14列</div>
    242.             <div class="col-1 bg-primary text-white">第15列</div>
    243.             <div class="col-1 bg-primary text-white">第16列</div>
    244.             <div class="col-1 bg-primary text-white">第17列</div>
    245.             <div class="col-1 bg-primary text-white">第18列</div>
    246.         </div>
    249.         <!-- 排序 -->
    250.         <div class="row bg-secondary mt-5">
    251.             <div class="col-1 bg-info text-white order-2">第1列</div>
    252.             <div class="col-1 bg-info text-white order-6">第2列</div>
    253.             <div class="col-1 bg-info text-white order-3">第3列</div>
    254.             <div class="col-1 bg-info text-white order-4">第4列</div>
    255.             <div class="col-1 bg-info text-white order-1">第5列</div>
    256.             <div class="col-1 bg-info text-white order-0">第6列</div>
    257.             <div class="col-1 bg-info text-white order-5">第7列</div>
    258.         </div>
    259.         <!-- 排序,响应式,order-{breakpoint}-10/... -->
    260.         <div class="row bg-secondary mt-1">
    261.             <div class="col-1 bg-info text-white order-sm-2">第1列</div>
    262.             <div class="col-1 bg-info text-white order-sm-6">第2列</div>
    263.             <div class="col-1 bg-info text-white order-sm-3">第3列</div>
    264.             <div class="col-1 bg-info text-white order-sm-4">第4列</div>
    265.             <div class="col-1 bg-info text-white order-sm-1">第5列</div>
    266.             <div class="col-1 bg-info text-white order-sm-0">第6列</div>
    267.             <div class="col-1 bg-info text-white order-sm-5">第7列</div>
    268.         </div>
    271.         <!-- 
    272.             多行对齐，对于单行是没有效果的  依托于行数
    273.                 align-content-start        顶对齐
    274.                 align-content-end        底对齐
    275.                 align-content-center    中间对齐
    276.                 align-content-between    上下两端对齐
    277.                 align-content-around    上下分散对齐
    278.                 align-content-stretch    没有给高度或者高度为auto，那高度会取父级的高度
    279.          -->
    280.         <div class="row bg-secondary mt-5 align-content-stretch " style="height: 200px;">
    281.             <div class="col-1 bg-primary text-white">第1列</div>
    282.             <div class="col-1 bg-primary text-white">第2列</div>
    283.             <div class="col-1 bg-primary text-white">第3列</div>
    284.             <div class="col-1 bg-primary text-white">第4列</div>
    285.             <div class="col-1 bg-primary text-white">第5列</div>
    286.             <div class="col-1 bg-primary text-white">第6列</div>
    287.             <div class="col-1 bg-primary text-white">第7列</div>
    288.             <div class="col-1 bg-primary text-white">第8列</div>
    289.             <div class="col-1 bg-primary text-white">第9列</div>
    290.             <div class="col-1 bg-primary text-white">第10列</div>
    291.             <div class="col-1 bg-primary text-white">第11列</div>
    292.             <div class="col-1 bg-primary text-white">第12列</div>
    293.             <div class="col-1 bg-primary text-white">第13列</div>
    294.             <div class="col-1 bg-primary text-white">第14列</div>
    295.             <div class="col-1 bg-primary text-white">第15列</div>
    296.             <div class="col-1 bg-primary text-white">第16列</div>
    297.             <div class="col-1 bg-primary text-white">第17列</div>
    298.             <div class="col-1 bg-primary text-white">第18列</div>
    299.         </div>
    301.         <!-- 多行对齐响应式, align-content-{breakpoint}-end-->
    302.         <div class="row bg-secondary mt-5 align-content-md-around" style="height: 200px;">
    303.             <div class="col-1 bg-primary text-white">第1列</div>
    304.             <div class="col-1 bg-primary text-white">第2列</div>
    305.             <div class="col-1 bg-primary text-white">第3列</div>
    306.             <div class="col-1 bg-primary text-white">第4列</div>
    307.             <div class="col-1 bg-primary text-white">第5列</div>
    308.             <div class="col-1 bg-primary text-white">第6列</div>
    309.             <div class="col-1 bg-primary text-white">第7列</div>
    310.             <div class="col-1 bg-primary text-white">第8列</div>
    311.             <div class="col-1 bg-primary text-white">第9列</div>
    312.             <div class="col-1 bg-primary text-white">第10列</div>
    313.             <div class="col-1 bg-primary text-white">第11列</div>
    314.             <div class="col-1 bg-primary text-white">第12列</div>
    315.             <div class="col-1 bg-primary text-white">第13列</div>
    316.             <div class="col-1 bg-primary text-white">第14列</div>
    317.             <div class="col-1 bg-primary text-white">第15列</div>
    318.             <div class="col-1 bg-primary text-white">第16列</div>
    319.             <div class="col-1 bg-primary text-white">第17列</div>
    320.             <div class="col-1 bg-primary text-white">第18列</div>
    321.         </div>
    322.     </div>