Bagaimana untuk Mencapai Lebar Konsisten untuk Item Flex Balut dalam Reka Letak Flexbox?

Cara Memastikan Lebar Konsisten Item Flex Balut dalam Susun Atur Flexbox

Masalah

Dalam susun atur flexbox, item flex biasanya mematuhi yang ditentukan lebar minimum dan maksimum. Walau bagaimanapun, apabila item flex dibalut ke baris baharu, ia cenderung untuk mengembang untuk menduduki ruang yang tersedia, mengakibatkan lebar tidak konsisten antara item pada baris yang berbeza.

Penyelesaian

Walaupun tiada penyelesaian langsung untuk isu ini dalam spesifikasi CSS, penyelesaian boleh dicapai menggunakan pertanyaan media.

Mixin Pendekatan

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:

Sapukan mixin pada setiap item flex:

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

Penjelasan

Campuran ini menjana satu siri pertanyaan media berdasarkan asas flex yang ditentukan bagi item flex. Setiap pertanyaan media mengira lebar maksimum item fleksibel untuk lebar port pandangan yang diberikan dengan membahagikan 100% dengan bilangan item fleksibel yang sesuai pada baris tersebut.

Mixin Kemas Kini untuk Kawalan Berasaskan Bekas

Dalam sesetengah kes, lebar bekas flex mungkin tidak sepadan dengan lebar port pandang. Untuk menangani perkara ini, versi mixin yang dikemas kini boleh digunakan pada 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);
    }
  }
}

Penggunaan:

Sapukan mixin pada bekas flex:

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

Contoh

Contoh CodePen yang diubah suai boleh ditemui di sini:
http://codepen.io/anon/pen/aNVzoJ

Kaveat

• Pendekatan ini tidak menyokong lebar yang sama antara item fleksibel pada semua baris.
• Jika lebar paparan maksimum diketahui, ia harus dinyatakan untuk mengelakkan media yang berlebihan pertanyaan.

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