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>

无法使用显示来对齐列：flex（NO BOOTSTRAP）

1 个答案: