Bagaimanakah Saya Boleh Mengekalkan Lebar Seragam untuk Item Fleksibel yang Dibalut Menggunakan Pertanyaan Media?

Mengekalkan Lebar Seragam untuk Item Fleksibel Berbalut

Apabila menggunakan flexbox untuk memaparkan satu siri item, adalah wajar untuk mengekalkan lebar seragam untuk item, walaupun apabila ia membalut pada berbilang baris. Secara tradisinya, ini telah menimbulkan cabaran, terutamanya apabila lebar item berada dalam julat yang ditentukan menggunakan lebar min dan lebar maks.

Artikel ini membentangkan penyelesaian yang tidak konvensional tetapi berkesan yang menggunakan pertanyaan media untuk mencapai kesan yang diingini .

Bancuhan (SCSS)

@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

Untuk menggunakan penyelesaian, hanya gunakan mixin pada item flex anda:

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

Penjelasan

Kami mencipta pertanyaan media untuk menentukan maksimum lebar item berdasarkan lebar tetingkap penyemak imbas. Sebagai contoh, jika setiap item harus mempunyai lebar maksimum 100px, kami membuat pertanyaan media untuk lebar penyemak imbas antara 100px hingga 600px, memastikan lebar item menyesuaikan dengan sewajarnya untuk saiz penyemak imbas yang berbeza.

Dengan melaksanakan campuran ini, item flex yang dibalut akan mengekalkan lebar yang ditentukan sambil kekal dalam kekangan yang ditentukan. Adalah penting untuk ambil perhatian bahawa lebar bekas fleksibel harus sepadan dengan saiz port pandang untuk mengelakkan percanggahan.

Selain itu, kemas kini yang disediakan membolehkan penyelesaian digunakan pada bekas fleksibel, memastikan pembalut item dan penyelenggaraan lebar yang betul tanpa mengira lebar bekas lentur.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengekalkan Lebar Seragam untuk Item Fleksibel yang Dibalut Menggunakan Pertanyaan Media?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!