компоновка гибкой коробки похожа на стол?

<p>я работаю с собственной структурой, которая зависит от определенной структуры нашего html. и одна из хитростей заключается в том, что каждой строке нужен свой собственный контейнер со своими классами и атрибутами данных.</p><p>так вот в чем проблема. без кардинального изменения dom, как сделать так, чтобы отображаемая ниже гибкая панель отображалась так же, как html-таблица? или стол единственный? решение должно работать как в ie11, так и в chrome.</p><p>я пытаюсь сделать так, чтобы это выглядело так ...</p><pre><code>column a | column b | column c 1 | 2 | 3 </code></pre><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>section { display: flex; flex-wrap: wrap; } section .col { flex: 1 1 auto; } section .line-break { flex-basis: 100%; width: 0px; height: 0px; overflow: hidden; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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="line-break"></div> <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> </div> </section> </body> </html></code></pre> </div> </div> </p>

<p>если контент, который вы собираетесь представить, имеет тип <em>tabular data</em>, то css table - правильный путь.</p><p>поскольку это можно сделать с помощью css, вы можете легко переключаться между любым типом отображения, таким как <code>flex</code>, <code>block</code> и т.д., или даже <code>float</code>, с использованием медиазапроса и т.д.</p><p><em>я также удалил элемент <code><div class="line-break"></div></code>, так как он вам не нужен, хотя, если он отображается компонентом или подобным, оставление его как есть не вызовет никаких проблем.</em></p><hr><p>если вам все еще нужно или нужно использовать flexbox, в этом моем ответе упоминается разница между таблицей css и flexbox по двум важным функциям:</p><ul> <li> <a href="https://stackoverflow.com/questions/48493500/can-flexbox-handle-varying-sizes-of-columns-but-consistent-row-height/48496343#48496343">может ли flexbox обрабатывать столбцы разных размеров, но одинаковую высоту строк?</a> </li> </ul><hr><p><em>обновлено, пример, показывающий некоторые полезные вещи flexbox, с различными столбцами ширины и диапазона.</em></p><p><em>фрагмент стека - демонстрационная версия flexbox ( <a href="https://jsfiddle.net/sjmqwafw/2/">fiddle для ie11</a> )</em></p><p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.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; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p><hr><p>фрагмент стека - таблица css</p><p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>section { display: table; width: 100%; } section > * { display: table-row; } section .col { display: table-cell; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>header, .row { display: flex; /* aligns all child elements (flex items) in a row */ } .col { flex: 1; /* distributes space on the line equally among items */ }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p>