如何實現跨瀏覽器的包裹 Flex 專案一致的水平擴展？

用於包裝內容的水平擴充Flex 容器

使用CSS Flexbox 時，瀏覽器可能會對某些屬性表現出不同的行為。特別是，創建按列排列的圖像網格並允許它們換行可能會給跨瀏覽器實現一致的行為帶來挑戰。

考慮以下HTML 代碼：

<div class="container">
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
</div>

以及隨附的CSS：

.container {
    display: inline-flex;
    flex-flow: column wrap;
    align-content: flex-start;
    height: 100%;
}

容器的目標是水平擴展以容納包裝的元素，提供帶有影像列的網格狀佈局。但是，正如您在提供的 jsFiddle 中可能遇到的那樣，瀏覽器行為有所不同：

• IE 11: 容器水平擴展，包裹每一列元素。
• Firefox： 僅第一列元素被包裹，其餘元素溢出。
• Chrome： 容器始終拉伸以填充其父級的寬度。

要解決這種不一致問題並實現IE 11 中觀察到的行為，請實現以下解決方案：

.container {
  display: inline-flex;
  writing-mode: vertical-lr;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 350px;
  background: blue;
}

.photo {
  writing-mode: horizontal-tb;
  width: 150px;
  height: 100px;
  background: red;
  margin: 2px;
}

此方法利用具有垂直書寫模式的行伸縮容器。透過交換塊方向和內聯方向，彈性項目被迫垂直流動。然後，各個 Flex 專案中的書寫模式將重設為水平。因此，容器將水平擴展以匹配包裝的內容，模仿 IE 11 中觀察到的行為。

以上是如何實現跨瀏覽器的包裹 Flex 專案一致的水平擴展？的詳細內容。更多資訊請關注PHP中文網其他相關文章！