How to Make a Flexbox Container Expand Horizontally for Wrapping Contents?

How to Expand Flexbox Container Horizontally for Wrapping Contents?

When employing CSS flexbox, browsers exhibit varying behavior, particularly in the context of container resizing. To address this inconsistency, we seek a solution to make a flexbox container expand horizontally to accommodate its wrapped contents.

In certain scenarios, one may require a container to encompass multiple div elements arranged in a column layout. The objective is to enable these elements to flow vertically, wrapping when reaching the bottom, resulting in columns of text or images. However, controlling the horizontal expansion of the container to match the wrapped elements remains a challenge.

To achieve the desired behavior, it is possible to leverage a row flex container with a vertical writing mode. By doing so, the inline and block directions are reversed, causing the flex items to flow vertically. Consequently, the aligned writing mode is reversed within the flex items, restoring the horizontal alignment.

For a practical demonstration, consider the following code snippet:

.container {
  display: inline-flex;
  writing-mode: vertical-lr; /* Reverses inline and block directions */
  flex-wrap: wrap;
  align-content: flex-start;
  height: 350px;
  background: blue;
}

.photo {
  writing-mode: horizontal-tb; /* Restores horizontal alignment */
  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>

Through this technique, the container will dynamically expand horizontally as new content is added, ensuring proper wrapping and alignment of the individual elements.

The above is the detailed content of How to Make a Flexbox Container Expand Horizontally for Wrapping Contents?. For more information, please follow other related articles on the PHP Chinese website!