flex-basis 对响应式弹性表的影响

Question

我遵循了有关如何使用 flex 制作表格的教程。 它有效，但我就是不明白为什么，这让我很沮丧。

这个问题分为两部分。

第1部分

这是代码：

<style>
  ee-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  ee-cell {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
  }
</style>

<ee-table>
  <ee-row>
    <ee-cell>Header - One .. ... .</ee-cell>
    <ee-cell>Header - Two. .. </ee-cell>
    <ee-cell>Header - Three</ee-cell>
  </ee-row>

  <ee-row>
    <ee-cell>Row 1 - One. ..... .. ..</ee-cell>
    <ee-cell>Row 1 - Two. ... .. .. ... ...... </ee-cell>
    <ee-cell>Row 1 - Three..... .. .. . ... .. .. ... ...... </ee-cell>

  </ee-row>
  <ee-row>
    <ee-cell>Row 2 - One</ee-cell>
    <ee-cell>Row 2 - Two</ee-cell>
    <ee-cell>Row 2 - Three</ee-cell>
  </ee-row>
  <ee-row>
    <ee-cell>Row 3 - One</ee-cell>
    <ee-cell>Row 3 - Two</ee-cell>
    <ee-cell>Row 3 - Three</ee-cell>
  </ee-row>
<ee-table>

问题：

(1a) 为什么flex-basis: 0使列对齐得很好？ （试着把它拿出来，你会得到一个未对齐的表格，这实际上是我对 flex 的期望）

(1b) 如何强制指定特定列的大小？ 例如，如果我希望第一列尽可能窄怎么办？ 如果我希望第三列具有特定宽度怎么办？

第2部分

这实际上是用来制作响应式表格的。 它实际上非常漂亮。 对于宽屏幕，它将显示所有列。 对于中等屏幕，它将显示除“不必要”单元格之外的所有内容。 对于小屏幕，它将堆叠信息而不显示标题。

这是显示所有内容的最短方法：

<style>
  ee-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  ee-cell {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;

  }

  @media screen and (max-width: 800px) {
    ee-cell {
      flex-basis: 100%;
    }
    ee-cell[header] {
      display: none
    }
  }

  @media screen and (max-width: 1200px) {
    ee-cell[unnecessary] {
      display: none
    }
  }


</style>

<ee-table>
  <ee-row>
    <ee-cell header>Header - One .. ... .</ee-cell>
    <ee-cell header>Header - Two. .. </ee-cell>
    <ee-cell header unnecessary>Header - Three</ee-cell>
  </ee-row>

  <ee-row>
    <ee-cell>Row 1 - One. ..... .. ..</ee-cell>
    <ee-cell>Row 1 - Two. ... .. .. ... ...... </ee-cell>
    <ee-cell unnecessary>Row 1 - Three..... .. .. . ... .. .. ... ...... </ee-cell>

  </ee-row>
  <ee-row>
    <ee-cell>Row 2 - One</ee-cell>
    <ee-cell>Row 2 - Two</ee-cell>
    <ee-cell unnecessary>Row 2 - Three</ee-cell>
  </ee-row>
  <ee-row>
    <ee-cell>Row 3 - One</ee-cell>
    <ee-cell>Row 3 - Two</ee-cell>
    <ee-cell unnecessary>Row 3 - Three</ee-cell>
  </ee-row>
<ee-table>

(2a) 这是一条好路吗？

(2b) 是否甚至可以将其转换为 CSS 表并拥有这种“表响应能力的圣杯”而无需进入 flex 兔子洞？

(2c) 事实上，它是一个兔子洞吗？

Answer 1

我会尽力回答您的弹性问题，但在开始之前，我建议可能一种更合乎逻辑和更直观的方法来实现您的目标是使用grids 。 你有没有理由避免这些？ 它们的布局就像表格一样，您可以更轻松地控制它们。

1a。

Flex-basis 表示弹性项目的初始大小（在你开始增长或缩小以适应空间之前）。 如果您删除了 flex-basis，它会将 go 设置为默认值 auto。 这意味着所有弹性项目的初始大小将明确定义（例如 150 像素）或根据其内容的大小自动调整大小。 通过将其设置为零，您为所有元素提供了相同的起点。 因此，使用 flex-basis 0 和 flex-grow 1，所有元素将平均增长以填充空间。 注意： flex-grow 只是一个比例，表示当有剩余空间时要填充多少空间。

1b。

使第一列尽可能小：（我不确定您是否有特定的宽度，如果有，请参阅下一个解决方案）

/* Leave the rest of the code as is */
ee-cell:nth-child(1) { 
   flex-basis: auto;
   flex-grow: 0;
}

要使第三列具有特定宽度：

/* Leave the rest of the code as is */
ee-cell:nth-child(3) { 
    width: 100px; 
    flex-basis:auto;
    flex-grow: 0; 
}

这两种解决方案都将基础设置为 auto ，表示初始大小将特定于该元素（内容 - 在第一个示例中 - 或特定宽度 - 在第二个示例中），然后说不允许这个项目增长到帮助填充空间（flex-grow：0）

2.

我查看了这个 CSS，我主要关心的是可读性和易用性（未来维护）。 我认为您可以使用 flex 实现您的目标，就像您所做的那样。 但如果是我，我会切换到网格。 下面的代码做同样的事情，但也给了你更多的控制权（我将在下面列出更多的选项），并且在我看来，当你阅读它时更有意义：

<style>
  ee-table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* use the line below to accomplish 1b - smallest possible first column, set width last column */
    /* grid-template-columns: auto 1fr 100px; */
    width: 100%;
  }

 @media screen and (max-width: 1200px) {
  ee-table { 
    grid-template-columns: 1fr 1fr;
  }
   ee-cell[unnecessary] {
     display: none
   }
 }

 @media screen and (max-width: 800px) {
    ee-table { 
      grid-template-columns: 1fr;
    }
    ee-cell[header] {
      display: none
    }
 }
</style>

<ee-table>
    <ee-cell header>Header - One .. ... .</ee-cell>
    <ee-cell header>Header - Two. .. </ee-cell>
    <ee-cell header unnecessary>Header - Three</ee-cell>

    <ee-cell>Row 1 - One. ..... .. ..</ee-cell>
    <ee-cell>Row 1 - Two. ... .. .. ... ...... </ee-cell>
    <ee-cell unnecessary>Row 1 - Three..... .. .. . ... .. .. ... ...... </ee-cell>

    <ee-cell>Row 2 - One</ee-cell>
    <ee-cell>Row 2 - Two</ee-cell>
    <ee-cell unnecessary>Row 2 - Three</ee-cell>

    <ee-cell>Row 3 - One</ee-cell>
    <ee-cell>Row 3 - Two</ee-cell>
    <ee-cell unnecessary>Row 3 - Three</ee-cell>
<ee-table>

带网格的其他选项

• 网格间隙：您可以设置列和行之间的间距（如果您愿意，可以不同）。
• 从行中解放：当您可以在 html 的一个长列表中拥有所有内容时，您将拥有更大的灵活性。 这也可以通过 flex 来实现，但不那么优雅。
• 移动单元格：您可以在 flexbox 中执行此操作，但您无法像使用网格那样在行之间执行此操作。