Layout a flex box similar to a table?

Question

I\'m working with a framework developed in-house which depends on a certain structure to our HTML. And one of the tricky things is that each row needs its own container with

Answer 1

If the content you are going to present is of type tabular data, then CSS Table is the proper way.

Since this can be done using CSS, you can easily swap between any display type such as flex, block, etc., or even float, using media query etc.

I also removed the

element, since you don't need, though if it is rendered by a component or similar, leaving it as is won't cause any problem.

---

If you still need, or have to, use Flexbox, this answer of mine mention the difference between CSS Table and Flexbox on two important features:

• Can flexbox handle varying sizes of columns but consistent row height?

---

Updated, a sample showing some useful Flexbox stuff, with varying width's and span columns.

Stack snippet - Flexbox (Fiddle demo for IE11)

.tbl {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  min-height: 50px;
}
.cell {
  flex: 4;
  border: 1px solid red;
}
.cell:nth-child(1) {
  flex: 1;
}
.cell:nth-child(2) {
  flex: 2;
}
.cell.span4-5 {
  flex: 8 24px;                    /*  col 4,5 flex-grow/border/padding  */
}
.cell.span3-4 {
  flex: 8 24px;                    /*  col 3,4 flex-grow/border/padding  */
}
.cell.span3-5 {
  flex: 12 36px;                   /*  col 3,4,5 flex-grow/border/padding  */
}
.row:first-child .cell {
  display: flex;
  justify-content: center;         /*  center horiz. */
  align-items: center;             /*  center vert. */
}
.row .cell {
  padding: 5px;
  box-sizing: border-box;
}

  

    
ID 
    
Nr 
    
Header 1 
    
 Header 2 
  
  

    
1
    
2
    
Content
    
Content
    
Content
  
  

    
2
    
3
    
Content
  
  

    
1
    
2
    
Content
    
Content
  

---

Stack snippet - CSS Table

section {
  display: table;
  width: 100%;
}

section > * {
  display: table-row;
}

section .col {
  display: table-cell;
}

  
  
  
    

      

        
Column A
        
Column B
        
Column C
      
      

        
1
        
2
        
3