title: Responsive table using flexbox css
body: <blockquote>
    <p>I would Like to make a flexible table using flexbox. My goal is to
    have four items by row and wrap if more than four items I started to
    implement my solution but I have some issus to make like the image
    below </p>
  </blockquote>
  
  <p><img src="https://i.stack.imgur.com/iir4b.png" alt=""></p>
  
  <p>Here is my code : </p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.Rtable {
    display: flex;
    flex-wrap: wrap;
   // margin: 10px 10px 10px 10px
    padding: 0px 10px 0px 20px;
  
  }
  .Rtable-cell {
    //box-sizing: border-box;
    width: 100%;  
    margin: 5px 0 ;
    min-height : 100px;
    display: flex;
  
       .contrat{
      border: solid 0.6px #6EB6FF;
      width:100%;
      word-break: break-word;
  
    }
  
  }
  
  .border {
    //border: solid 10px #6EB6FF;
    border-width: thin;
    border-right: 1px solid #6EB6FF;
    border-left: 1px solid #6EB6FF;
    border-top: 1px solid #6EB6FF;
    border-bottom: 1px solid #6EB6FF;
  }
  
  
  /* Table column sizing
  ================================== */
  .Rtable--5cols &gt; .Rtable-cell  { width: 20%; }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="Rtable Rtable--5cols"&gt;
  
    &lt;div class="Rtable-cell border"&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div class="lienPopin"&gt;nom&lt;/div&gt;
      &lt;div &gt;lien popin&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="Rtable-cell border" &gt;Has a sword named Ice&lt;/div&gt;
    &lt;div class="Rtable-cell border"&gt;No direwolf&lt;/div&gt;
    &lt;div class="Rtable-cell border"&gt;&lt;strong&gt;Lord of Winterfell&lt;/strong&gt;&lt;/div&gt;
  
    &lt;div class="Rtable-cell border"&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div class="lienPopin"&gt;nom&lt;/div&gt;
      &lt;div &gt;lien popin&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="Rtable-cell border"&gt;
        &lt;div class="contrats "&gt;
          &lt;div class="contrat"&gt; &lt;h3&gt;CDI - Aide soignant tototoototootoo &lt;/h3&gt;&lt;/div&gt;
          &lt;div class="contrat"&gt; &lt;h3&gt;CDD - Infirmier&lt;/h3&gt; &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="Rtable-cell border"&gt;Direwolf: Ghost&lt;/div&gt;
    &lt;div class="Rtable-cell border"&gt;&lt;strong&gt;Knows nothing&lt;/strong&gt;&lt;/div&gt;
  </code></pre>