How Do You Make Flexbox Containers Expand Horizontally to Accommodate Wrapped Content?

How Flexbox Containers Expand Horizontally

Flexbox offers nuanced control over the layout and alignment of page elements. One challenge lies in making flexbox containers expand horizontally to accommodate wrapped contents. Browsers exhibit varying behaviors in this regard, necessitating specific solutions.

Consider the desired grid of images:

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

Despite specifying column wrapping, Firefox restricts the container's width to the first column's elements, while Chrome expands it to the parent's width regardless of content. To achieve IE11's behavior, an alternative approach is required.

Exploiting Writing Modes

Browsers generally support writing modes well. Writing modes allow swapping the block and inline directions, enabling vertical flow of flex items. Inside the flex items, the horizontal writing mode can be restored.

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

By setting the container's writing mode to vertical-lr and applying writing-mode: horizontal-tb to the flex items, you can effectively achieve vertical flow and horizontal expansion. This solution aligns with browser support for writing modes and addresses the specific requirement for horizontally expanding flexbox containers.

The above is the detailed content of How Do You Make Flexbox Containers Expand Horizontally to Accommodate Wrapped Content?. For more information, please follow other related articles on the PHP Chinese website!