Bagaimana untuk Mengekalkan Lebar Item Fleksibel yang Konsisten Merentasi Baris Semasa Membungkus?

Memastikan Item Fleksibel yang Dibalut Mengekalkan Lebar Baris Sebelumnya

Dalam bekas flex, apabila item flex dibalut, ia cenderung untuk mengambil ruang maksimum yang dibenarkan, yang membawa kepada lebar yang berbeza antara item pada baris yang berbeza. Untuk menangani perkara ini, kami boleh menggunakan helah CSS berikut:

Penyelesaian 1: Campuran Tersuai untuk Item Fleksibel

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

Penggunaan:

Sapukan mixin pada item flex:

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

Penyelesaian 2: Flex Container Mixin for Element Queries

Mixin:

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

Penggunaan:

Sapukan mixin pada bekas flex:

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

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Lebar Item Fleksibel yang Konsisten Merentasi Baris Semasa Membungkus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!