Home >Web Front-end >CSS Tutorial >How to Make a Flexbox Container Expand Horizontally for Wrapping Contents?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-11-07 05:02:03180browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn