Невозможно выровнять столбцы с отображением: flex (NO BOOTSTRAP)

Question

Примечание: Прежде чем я начну задавать свой вопрос, я должен попросить вас не предлагать решения с использованием Bootstrap. Спасибо

Проблема в том, что: У меня есть несколько строк. Например 2; допустим, в первом ряду у меня 6 столбцов. Код будет выглядеть так:

<div style="display: flex;">
    <div style="flex:1;">1</div>
    <div style="flex:1;">2</div>
    <div style="flex:1;">3</div>
    <div style="flex:1;">4</div>
    <div style="flex:1;">5</div>
    <div style="flex:1;">6</div>
</div>

Второй ряд содержит 4 столбца:

<div style="display: flex;">
    <div style="flex:1;">1</div>
    <div style="flex:1;">2</div>
    <div style="flex:1;">3</div>
    <div style="flex:1;">4</div>
</div>

Как вы видите в Jsfiddle , они плохо выровнены и не ведут себя как строки. Есть ли какое-либо решение FLEX , когда строки ведут себя как таблица, как:

<div style="display: flex;">
    <div style="flex:6;">1</div>
    <div style="flex:6;">2</div>
    <div style="flex:6;">3</div>
    <div style="flex:6;">4</div>
</div>

Спасибо. С уважением, Ник.

Answer 1

Если вам известно максимальное количество столбцов в таблице , вы можете использовать flex: calc(1/max_columns) ( в этом примере 6 ), чтобы выполнить это.

<div style="display: flex;">
  <div style="flex:1;">1</div>
  <div style="flex:1;">2</div>
  <div style="flex:1;">3</div>
  <div style="flex:1;">4</div>
  <div style="flex:1;">5</div>
  <div style="flex:1;">6</div>
</div>

<div style="display: flex;">
  <div style="flex:calc(1/6);">1</div>
  <div style="flex:calc(1/6);">2</div>
  <div style="flex:calc(1/6);">3</div>
  <div style="flex:calc(1/6);">4</div>
</div>