Bagaimana untuk Mengekalkan Lebar Item yang Konsisten dalam Reka Letak Flexbox Selepas Balutan?

Mengekalkan Lebar Item Seragam Selepas Balutan Flexbox

Dalam susun atur flexbox, mengekalkan lebar item yang konsisten merentas berbilang baris boleh mencabar. Walau bagaimanapun, ini boleh dicapai melalui gabungan sifat CSS, seperti yang diterangkan di bawah:

Sifat CSS

flex-grow

Menetapkan faktor pertumbuhan item berbanding dengan barangan lain. Dengan menetapkan ini kepada 1, setiap item mempunyai potensi pertumbuhan yang sama.

flex-basis

Mentakrifkan saiz awal item. Ini menentukan lebar minimum item.

lebar maksimum

Menetapkan lebar maksimum item, memastikan ia tidak melebihi saiz yang dikehendaki.

Media CSS Pertanyaan

Pertanyaan media digunakan untuk melaraskan sifat lebar maksimum berdasarkan saiz port pandangan, mengekalkan item ketekalan lebar merentas berbilang baris.

Contoh

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  max-width: 100px;
  flex: 1 0 0;
}

@media (min-width: 200px) {
  li {
    max-width: 50%;
  }
}

@media (min-width: 300px) {
  li {
    max-width: 33.33333%;
  }
}

Penjelasan

CSS ini menetapkan lebar awal setiap item kepada 100px. Ia kemudian menggunakan pertanyaan media untuk melaraskan sifat lebar maks apabila saiz port pandangan berubah, memastikan item mengekalkan lebar yang diingini walaupun apabila ia membalut ke baris baharu.

Penyelesaian Alternatif

Flex -Wrap-Fix Mixin

Alternatif yang lebih elegan ialah menggunakan flex-wrap-fix 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 item flex:

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

Mixin ini mencapai hasil yang sama seperti pertanyaan media CSS tetapi menghapuskan keperluan untuk kod berulang dan memudahkan penyelenggaraan.

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