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

This code works for me:

        * {
            box-sizing: border-box;
        }


        body, html {
            height: 100%;
            margin: 0;
        }


        #container {
            width: 400px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            background-color: lightgrey;
            padding: 10px;

        }


        .shelf {

            flex: 1 1 auto;
            width: 100%;
            margin-bottom: 10px;
            border: 1px solid black;
            background-color: lightgreen;

            display: flex;
            flex-direction: row;

        }
        .shelf:last-child {
            margin-bottom: 0;
        }


        .labelbox {
            flex: 0 0 35%;
        }


        .valuebox {
            flex: 0 0 65%;
        }

<div id="container">

    <div class="shelf">
        <div class="labelbox">Name: </div> <div class="valuebox">Barry Carter</div>
    </div>

    <div class="shelf">
        <div class="labelbox">DOB:</div><div class="valuebox">10/12/1980</div>
    </div>

    <div class="shelf">

        <div class="labelbox">
            Description:
        </div>

        <div class="valuebox">

            This content goes on and on and will force the height to expand. And the label box to the left will
            "move" with it. There need not be much of a relation other than that their parent div/flex-container is
            getting taller as well.

        </div>

    </div>

    <div class="shelf">
        <div class="labelbox">Group:</div><div class="valuebox">Advanced</div>
    </div>

    <div class="shelf">
        <div class="labelbox">End Date:</div><div class="valuebox">2020-09-20</div>
    </div>

</div>

Answer 2

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 <div class="line-break"></div> 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;
}

<div class="tbl">
  <div class="row">
    <div class="cell">ID </div>
    <div class="cell">Nr </div>
    <div class="cell">Header 1 </div>
    <div class="cell span4-5"> Header 2 </div>
  </div>
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">Content</div>
    <div class="cell">Content</div>
    <div class="cell">Content</div>
  </div>
  <div class="row">
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell span3-5">Content</div>
  </div>
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell span3-4">Content</div>
    <div class="cell">Content</div>
  </div>
</div>

---

Stack snippet - CSS Table

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

section > * {
  display: table-row;
}

section .col {
  display: table-cell;
}

<html>
  <head>
  </head>
  <body>
    <section>
      <header>
        <div class="col">Column A</div>
        <div class="col">Column B</div>
        <div class="col">Column C</div>
      </header>
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
      </div>
    </section>
  </body>
</html>

Answer 3

header, .row {
  display: flex;  /* aligns all child elements (flex items) in a row */
}

.col {
  flex: 1;        /* distributes space on the line equally among items */
}

<section>
  <header>
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </header>
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
  </div>
</section>