CSS - 如何正確使用 flex-basis？

Question

我正在設置自己的網格組件。 我做了一個行組件，它有一個display:flex; flex-wrap: wrap display:flex; flex-wrap: wrap行和動態gap 、 column-gap和row-gap 。 我有一個列組件，我在其中設置了動態彈性基礎。 我試着像這樣使用它：

<Row :gap="30">
  <Column :w="50">
    Text
  </Column>
  <Column :w="50">
    Text
  </Column>
  <Column :w="50">
    Text
  </Column>
</Row>

我將50轉換為以彈性為基礎的百分比。 事實證明，由於間隙，它包裹了所有物品。 我是否使用了 flex-basis 錯誤？ 還有其他方法來設置我的列嗎？

Answer 1

當您在 flex-basis 中指定長度時，您正在指定單個項目沿 flex 軸的長度。 當您以這種方式指定百分比時，百分比等於父容器大小的一小部分！ 您可以在MDN 的 flex-basis 定義中看到這一點，在“值”部分解釋了您可以賦予此屬性的可能值：

<'寬度'>
絕對 <length>、父 flex 容器的主要大小屬性的 <percentage> 或關鍵字 auto。 負值無效。 默認為自動。

這意味着，假設您的 flex 定向為一行：

• 如果您指定flex-basis: 200px ，則每個彈性項目的寬度將為 200px。
• 如果您指定flex-basis: 25% ，則每個彈性項目的寬度將是父寬度的 25%。 如果父容器是 100px，那么它們每個的寬度都是 25px。

出於 flex wrapping 的目的，除了 flex 基礎之外，還必須考慮定義的任何間隙。 如果您有flex-basis: 25%加上 25% 的間隙，則該彈性項目占據容器寬度的 50%。

毫不奇怪，你的行被環繞——你已經將它們共同定義為它們父寬度的 150%：間隙也會使事情變得更糟，50% 的寬度加上任何間隙意味着單元格必須占據一半以上的水平空間。 所以不可能有列。

如果您想要沿一行進行小數大小調整，其中每個元素占據其父寬度的相等份額，您應該使用 CSS Grid 和grid-auto-columns: 1fr 。 如果您需要單元格間隙，則尤其如此：當您定義具有分數大小和間隙的網格單元格時，可以同時考慮兩者。

下面的代碼片段演示了以下內容：

1. 在寬度為 200px 的 flex 框中定義精確的 flex-basis
2. 在相同的 flex 框中定義百分比 flex-basis
3. 在單行中使用 CSS 網格
4. 使用帶有包裝的 CSS 網格

 .flex-absolute-width, .flex-relative-width, .grid, .grid-wrapped { width: 200px; border: 1px solid blue; gap: 8px; }.cell { outline: 1px dashed red; }.flex-absolute-width, .flex-relative-width { display: flex; flex-flow: row wrap; }.flex-absolute-width.cell { flex-basis: 50px; }.flex-relative-width.cell { flex-basis: 50%; }.grid { display: grid; grid-auto-columns: 1fr; /* each column shares 1fr width */ grid-auto-flow: column; /* prefer to flow into new columns */ }.grid-wrapped { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }

 Flex-basis 50px: <div class="flex-absolute-width"> <div class="cell">a</div> <div class="cell">b</div> <div class="cell">c</div> </div> Flex-basis 50%: <div class="flex-relative-width"> <div class="cell">a</div> <div class="cell">b</div> <div class="cell">c</div> </div> A grid with each column being told to use the same fraction of width: <div class="grid"> <div class="cell">a</div> <div class="cell">b</div> <div class="cell">c</div> </div> A wrapped grid with each column being told to use the same fraction of width: <div class="grid-wrapped"> <div class="cell">a</div> <div class="cell">b</div> <div class="cell">c</div> </div>

Answer 2

 #main { width: 270px; height: 100px; border: 1px solid #c3c3c3; display: flex; flex-wrap: wrap; column-gap: 5px; } #main div { flex-grow: 0; flex-shrink: 0; flex-basis: 50px; }

 <row id="main"> <div style="background-color:coral;">50px</div> <div style="background-color:lightblue;">50px</div> <div style="background-color:khaki;">50px</div> <div style="background-color:pink;">50px</div> <div style="background-color:lightgrey;">50px</div> </row>