How to make a list of flexbox. enter image description here

Structure by code:

<div class="card"> <div class="card-body"> <div class="d-flex"> <div class="font-weight-bold">Server:</div> <div class="column2">8sjf0-s89d-eiwe-3892k0s</div> </div> <div class="d-flex"> <div class="font-weight-bold">Host Name:</div> <div class="column2">TIGRA</div> </div> <div class="d-flex"> <div class="font-weight-bold">OS Type:</div> <div class="column2">WINDOWS</div> </div> <div class="d-flex"> <div class="font-weight-bold">IP Address:</div> <div class="column2">192.111.11</div> </div> </div> </div>

1 answer 1

Did this mean?

 *{ box-sizing:border-box; } .card{ width:300px; max-width:100%; border:2px solid; } .card__row{ display:flex; border-bottom:1px solid; } .card__row:last-child{ border-bottom:none; } .card__cell{ padding:0 5px; } .card__cell:first-child{ padding-right:20px; flex:0 0 auto; width: 150px; } .card__cell:not(:first-child){ flex:1 1 auto; } .font-weight-bold{ font-weight:bold; } 
 <div class="card"> <div class="card__row"> <div class="card__cell font-weight-bold">Server:</div> <div class="card__cell">8sjf0-s89d-eiwe-3892k0s</div> </div> <div class="card__row"> <div class="card__cell font-weight-bold">Host Name:</div> <div class="card__cell">TIGRA</div> </div> <div class="card__row"> <div class="card__cell font-weight-bold">OS Type:</div> <div class="card__cell column2">WINDOWS</div> </div> <div class="card__row"> <div class="card__cell font-weight-bold">IP Address:</div> <div class="card__cell">192.111.11</div> </div> </div>

  • The behavior should be like this. As in the table. Sketched option. codepen.io/pikiviki/pen/aqxyVL - Oleg Ovcharenko
  • @Oleg Ovcharenko, in this case, you cannot do without setting the cell width. Why not use display:table ? - zhurof
  • Gennady, if we ask display: table, then if we put a long text in the last upper cell without spaces (WWWW ....), the text will crawl out and break everything. If I set the table-layout: fixed, I get the same behavior as with the flex-box case. - Oleg Ovcharenko