如何跨瀏覽器實現一致的水平擴展 Flexbox 容器行為？

水平擴充 Flexbox 容器

問題

在 Flexbox 中，包含包裝內容的容器的行為因瀏覽器而異。 IE 11 透過水平拉伸容器來包裹元素來表現出所需的行為，而 Firefox 和 Chrome 則表現出不一致。

解決方案

雖然瀏覽器缺乏列彈性容器的完整實現，但它們很好地支援寫入模式。透過使用具有垂直寫入模式的行彈性容器，容器的內聯方向與區塊方向交換。 Flex 專案將垂直流動，並且可以在 Flex 專案內恢復水平書寫模式。

範例程式碼

.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;
}

<div class="container">
  <div class="photo">1</div>
  <div class="photo">2</div>
  <div class="photo">3</div>
  <div class="photo">4</div>
  <div class="photo">5</div>
  <div class="photo">6</div>
  <div class="photo">7</div>
  <div class="photo">8</div>
  <div class="photo">9</div>
</div>

此方法透過確保容器水平拉伸來模仿 IE 11 的行為以適應 Firefox 和 Chrome 中的包裝內容。

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