How to Maintain Uniform Flex-Item Width After Wrapping in Flexbox?

How to Maintain Uniform Flex-Item Width After Wrapping

Flexbox offers the ability to create flexible layouts, but when it comes to wrapping flex-items, their widths may vary drastically. To address this issue, let's delve into a clever workaround using CSS media queries.

The Solution

While not strictly a solution, the following approach provides an elegant alternative using media queries and without resorting to JavaScript.

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 your flex item:

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

Advanced Alternative

If your flex container's width is not constrained to the viewport size, you can use element queries instead of browser media queries. Here's a mixin for the flex container:

@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);
    }
  }
}

Explanation

For each specified flex-basis, we calculate the maximum number of items per row based on the viewport width. We then create media queries to restrict the item's maximum width as a percentage of the viewport width.

Example

Check out the updated CodePen below:

https://codepen.io/anon/pen/aNVzoJ

This demonstrates how flex-items maintain their desired width after wrapping, ensuring a consistent layout.

The above is the detailed content of How to Maintain Uniform Flex-Item Width After Wrapping in Flexbox?. For more information, please follow other related articles on the PHP Chinese website!