关于css:栅格布局的三种主要实现方式原理分析

实现栅格零碎布局的形式

1. 纯伸缩 flex 布局，实例如下：
   html:

   <div class="container">
    <div class="row">
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>
   </div>

   css:

   .row{
     display:flex;
     flex-wrap:wrap;
   }
   .col-6{flex:0 0 25%;}