Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mengekalkan Lebar Item Fleksibel yang Konsisten Merentasi Baris Semasa Membungkus?

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

Linda Hamilton
Linda Hamiltonasal
2024-11-24 19:46:12640semak imbas

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

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn