Bagaimana untuk Mengekalkan Lebar Item Fleksibel yang Seragam Selepas Membungkus dalam Flexbox?

Cara Mengekalkan Lebar Item Fleksibel yang Seragam Selepas Balutan

Flexbox menawarkan keupayaan untuk mencipta susun atur yang fleksibel, tetapi apabila membalut item fleksibel, lebarnya mungkin berbeza secara drastik. Untuk menangani isu ini, mari kita mendalami penyelesaian yang bijak menggunakan pertanyaan media CSS.

Penyelesaian

Walaupun bukan penyelesaian yang ketat, pendekatan berikut menyediakan alternatif yang elegan menggunakan pertanyaan media dan tanpa menggunakan 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);
    }
  }
}

Penggunaan

Gunakan mixin pada flex anda item:

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

Alternatif Lanjutan

Jika lebar bekas flex anda tidak terhad kepada saiz viewport, anda boleh menggunakan pertanyaan elemen dan bukannya pertanyaan media penyemak imbas. Berikut ialah campuran untuk bekas flex:

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

Penjelasan

Untuk setiap asas-flex yang ditentukan, kami mengira bilangan maksimum item setiap baris berdasarkan port pandangan lebar. Kami kemudian membuat pertanyaan media untuk mengehadkan lebar maksimum item sebagai peratusan lebar port pandang.

Contoh

Lihat CodePen yang dikemas kini di bawah:

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

Ini menunjukkan cara item flex mengekalkan lebar yang diingini selepas dibalut, memastikan reka letak yang konsisten.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Lebar Item Fleksibel yang Seragam Selepas Membungkus dalam Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!