响应式 table 使用 flexbox css

Question

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

这是我的代码：

CSS

.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 > .Rtable-cell  { width: 20%; }

HTML

<div class="Rtable Rtable--5cols">

  <div class="Rtable-cell border">
    <div></div>
    <div class="lienPopin">nom</div>
    <div >lien popin</div>
  </div>

  <div class="Rtable-cell border" >Has a sword named Ice</div>
  <div class="Rtable-cell border">No direwolf</div>
  <div class="Rtable-cell border"><strong>Lord of Winterfell</strong></div>

  <div class="Rtable-cell border">
    <div></div>
    <div class="lienPopin">nom</div>
    <div >lien popin</div>
  </div>
  <div class="Rtable-cell border">
      <div class="contrats ">
        <div class="contrat"> <h3>CDI - Aide soignant tototoototootoo </h3></div>
        <div class="contrat"> <h3>CDD - Infirmier</h3> </div>
    </div>
  </div>
  <div class="Rtable-cell border">Direwolf: Ghost</div>
  <div class="Rtable-cell border"><strong>Knows nothing</strong></div>

Answer 1

你的html

 <div class="Rtable-cell border">
  <div class="contrats ">
    <div class="contrat"> <h3>CDI - Aide soignant tototoototootoo </h3></div>
    <div class="contrat"> <h3>CDD - Infirmier</h3> </div>
</div>

我的html：

 <div class="Rtable-cell border have_inner_item">

                      <div class="contrat"> <h3>CDI - Aide soignant tototoototootoo </h3></div>
                      <div class="contrat"> <h3>CDD - Infirmier</h3> </div>
                      <div class="contrat"> <h3>CDD - other row</h3> </div>

                </div>

新 css class

.have_inner_item {
display: flex;
flex-direction: column;

}

这是您要找的吗：下面是图片

建议阅读 css flexbox

的完整指南

响应式 table 使用 flexbox css

Responsive table using flexbox css

css

flexbox

responsive

css-tables