Flexbox VS Tables, Why Do We Need Flexbox

flexbox vs tables, why do we need flexbox?

There are three distinctions I can think of between using flexbox and using table display values or floats to layout a page:

Being able to re-order elements irrespective of the HTML source order, while keeping elements in the normal flow - you can do this by specifying an integer value with the order property.
It requires less typing than traditional float layouts (you don't need all of the pseudo-elements for clearing purposes) and is more semantic, while using floats or tables for layouts obviously isn't.
The ability for flex-items to grow and shrink to fill horizontal and vertical space based on an ancestor elements' dimensions - by using the flex-grow and flex-shrink properties.

The problem (as you've pointed out) is that support is still pretty bad; In fact Firefox is still implementing an older version of the flexbox module, so you have to account for minor discrepancies in syntax and behavior, depending on which browser you're using. It has been said quite a bit, though, that it is the future for layouts, especially for complex web apps that are popping up more often. It's worth learning if you're okay with making an inevitably wise investment - at the cost of not really being useable right now.

I also suggest you take a look at this smashing magazine article for a friendly introduction to flexbox (it's fairly recently written)

Layout a flex box similar to a table?

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

HTML 5.1 W3C Recommendation, 1 November 2016, 4.9 Tabular data

Given that you can't, or don't want to, alter the markup, this can be done using CSS Table, and with that 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.

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

HTML/CSS performance: flexbox vs table for large data tables

Performance is the wrong question here. What is the meaning of the content? If the content is meant to be read as a table of data, then you use a table.

If the content is not meant to be read as a table of data, don't use a table.

How to define a dynamic table layout with flexbox

I think this is what you are looking for :

.container {
  width: 100%;
  height: 100%;
  background-color: rosybrown;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.item {
  width: 20%;
  background: red;
  margin: 1%;
  flex: auto;
  text-align: center;
  min-height: 50px;
}

<div class="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

Which approach is preferable for creating a grid - flexbox, css-table or inline-block?

each has benefits and disadvantages.
Flexbox is very useful in many cases, but some browsers still lacks the features.

Tables may sound oldskool, but if you are coding an html mailing, it is still the best way.

I think before starting a project, you should check other projects and search on google what is best for you scope.

Use a table or flexbox to create a grid-like UI

If the information you're presenting is really tabular, semantically, then using a table makes sense because it fits the information you're presenting and works the way you've said you want it to in browsers.

E.g.:

.target, .target td {  border: 1px solid #ddd;}.special {  text-align: center;}

<table class="target">  <tbody>    <tr>      <td>Column width is width of this text</td>      <td class="special">Row height is height of this text</td>    </tr>    <tr>      <td>Text</td>      <td>Text</td>    </tr>  </tbody></table>

Flexbox VS Tables, Why Do We Need Flexbox