How to Achieve Consistent Widths for Wrapped Flex Items in Flexbox Layouts?

How to Ensure Consistent Width of Wrapped Flex Items in a Flexbox Layout

Problem

In a flexbox layout, flex items typically adhere to the specified minimum and maximum widths. However, when flex items wrap to a new line, they tend to expand to occupy the available space, resulting in inconsistent widths between items on different lines.

Solution

While there is no direct solution to this issue within the CSS specification, a workaround can be achieved using media queries.

Mixin Approach

SCSS Mixin:

@mixin flex-wrap-fix($flex-basis, $max-viewport-width: 2000px) {
  flex-grow: 1;
  flex-basis: $flex-basis;
  max-width: 100%;

  $multiplier: 1;
  $current-width: 0px;

  @while $current-width < $max-viewport-width {
    $current-width: $current-width + $flex-basis;
    $multiplier: $multiplier + 1;

    @media(min-width: $flex-basis * $multiplier) {
      max-width: percentage(1/$multiplier);
    }
  }
}

Usage:

Apply the mixin to each flex item:

.flex-item {
  @include flex-wrap-fix(100px)
}

Explanation

This mixin generates a series of media queries based on the specified flex-basis of the flex items. Each media query calculates the maximum width of the flex item for a given viewport width by dividing 100% by the number of flex items that fit on that line.

Updated Mixin for Container-Based Control

In some cases, the width of the flex container may not match the viewport width. To address this, an updated version of the mixin can be applied to the flex container instead:

@mixin flex-container-wrap-items($flex-basis, $max-expected-width: 2000px) {
  display: flex;
  flex-wrap: wrap;

  > * {
    max-width: 100%;
    flex-grow: 1;
    flex-basis: $flex-basis;
  }

  $multiplier: 1;
  $current-width: 0px;

  @while $current-width < $max-expected-width {
    $current-width: $current-width + $flex-basis;
    $multiplier: $multiplier + 1;

    &[min-width~="#{$flex-basis * $multiplier}"] > * {
      max-width: percentage(1/$multiplier);
    }
  }
}

Usage:

Apply the mixin to the flex container:

.flex-container {
  @include flex-container-wrap-items(100px)
}

Example

A modified CodePen example can be found here:
http://codepen.io/anon/pen/aNVzoJ

Caveats

• This approach does not support equal widths between flex items on all lines.
• If the maximum viewport width is known, it should be specified to avoid excessive media queries.

The above is the detailed content of How to Achieve Consistent Widths for Wrapped Flex Items in Flexbox Layouts?. For more information, please follow other related articles on the PHP Chinese website!