Bagaimana untuk Mengekalkan Lebar Item Fleksibel yang Konsisten Merentasi Baris Semasa Membungkus?-tutorial css-php.cn

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

Linda Hamilton

Lepaskan： 2024-11-24 19:46:12

asal

519 orang telah melayarinya

How to Maintain Consistent Flex Item Widths Across Rows When Wrapping?

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

Salin selepas log masuk

Penggunaan:

Sapukan mixin pada item flex:

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

Salin selepas log masuk

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

Salin selepas log masuk

Penggunaan:

Sapukan mixin pada bekas flex:

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

Salin selepas log masuk

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!