无法用 display: flex (NO BOOTSTRAP) 对齐列答案

【问题标题】：Can not justify columns with display: flex (NO BOOTSTRAP)无法用 display: flex (NO BOOTSTRAP) 对齐列
【发布时间】：2018-09-13 15:22:01
【问题描述】：

注意：在我开始提出问题之前，我必须要求您不要使用 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>

谢谢。问候，尼克。

【问题讨论】：

你希望他们如何被证明是合理的？您还有其他我们可以查看的 css 还是全部内联？你想要的结果是什么？
老实说，这似乎是一个最好使用 css-grid 而不是 flex-box 回答的问题。
@SmokeyDawson 其他 css 没关系。我想像表格一样调整行。一行中的列。 1（第二行）在 1（第一行）下面，2（第二行）在 2（第一行）下面和 s.o.使用弹性盒

标签： html css flexbox

【解决方案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>

【讨论】：