如何使 Flexbox 容器水平擴展以容納打包內容？

Flexbox 容器如何水平擴展

Flexbox 提供對頁面元素的佈局和對齊方式的細微控制。一項挑戰在於如何使彈性盒容器水平擴展以容納包裝的內容物。瀏覽器在這方面表現出不同的行為，需要特定的解決方案。

考慮所需的影像網格：

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

儘管指定了列換行，Firefox 仍將容器的寬度限制為第一列的元素，而Chrome 會將其擴展到父級的寬度，而不管內容如何。要實現 IE11 的行為，需要採用替代方法。

利用寫入模式

瀏覽器通常都很好地支援寫入模式。寫入模式允許交換塊方向和內聯方向，從而實現彈性項目的垂直流動。在flex items內部，可以恢復水平書寫模式。

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

透過將容器的書寫模式設定為vertical-lr，並在flex items中應用writing-mode:horizo​​ntal-tb，可以有效實現垂直流動和水平擴展。此解決方案與瀏覽器對書寫模式的支援保持一致，並滿足水平擴展 Flexbox 容器的特定要求。

以上是如何使 Flexbox 容器水平擴展以容納打包內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！