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 中執行此操作，但您無法像使用網格那樣在行之間執行此操作。