使用flexbox css的响应表

Question

  

我想使用flexbox制作灵活的表格。我的目标是   如果我开始使用超过四个项目，则按行和换行四个项目   实现我的解决方案，但我有一些像图像一样的问题   下面

这是我的代码：

CSS

Traceback (most recent call last):
  File "server.py", line 260, in <module>
    server.startServer()
  File "server.py", line 90, in startServer
    keyfile=keyServer)
  File "/usr/local/lib/python3.6/ssl.py", line 1149, in wrap_socket
    ciphers=ciphers)
  File "/usr/local/lib/python3.6/ssl.py", line 814, in __init__
    self.do_handshake()
  File "/usr/local/lib/python3.6/ssl.py", line 1068, in do_handshake
    self._sslobj.do_handshake()
  File "/usr/local/lib/python3.6/ssl.py", line 689, in do_handshake
    self._sslobj.do_handshake()
ssl.SSLError: [SSL: HTTP_REQUEST] http request (_ssl.c:777)

HTML

.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%; }

Answer 1

你的HTML

populate

我的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>

新的css类

 <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 flexbox

的完整指南