如何使 Flexbox 容器水平擴展並跨瀏覽器封裝內容？-css教學-PHP中文網

如何使 Flexbox 容器水平擴展並跨瀏覽器封裝內容？

DDD

發布： 2024-11-07 12:27:02

原創

833 人瀏覽過

How to Make a Flexbox Container Expand Horizontally with Wrapped Content Across Browsers?

使用包裝內容水平擴展 Flexbox 容器

Flexbox 為創建靈活的佈局提供了強大的解決方案。但是，瀏覽器行為可能會出現差異，導致意外結果。當嘗試使 Flexbox 容器與其包裝的內容水平擴展時，就會出現這樣的問題。

考慮以下 HTML 和 CSS 程式碼：

<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>

登入後複製

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

登入後複製

此程式碼旨在建立一個從上到下流動的圖像網格，當它們到達底部時會環繞。但是，瀏覽器行為有所不同：

IE 11：容器擴充功能以成功容納包裝的元素。
Firefox：僅包裝第一個元素列，其他元素溢位。
Chrome:容器總是填滿其父級的寬度。

要在其他瀏覽器中實現所需的行為，請考慮利用具有垂直書寫模式的行彈性容器。

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

登入後複製

<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>

登入後複製

將塊方向與內聯方向交換，Flex 項目垂直流動。恢復 Flex 專案內的水平書寫模式即可完成解決方案。該技術允許創建水平擴展的 Flexbox 容器，以在瀏覽器中以一致的方式匹配其列換行內容。

以上是如何使 Flexbox 容器水平擴展並跨瀏覽器封裝內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！